Virtusize ガイド

# Google Tag Manager(GTM)を用いて商品詳細ページ(PDP)にバーチャサイズタグを実装する

商品詳細ページにGTMを用いてバーチャサイズタグを実装する方法をご説明いたします。 タグの導入はバーチャサイズサービスの利用開始前であっても、利用中であっても行うことができます。

注文された商品の情報を連携していただくことによって、ユーザーは購入履歴に基づいてアイテムを比較することができます。

# 始める前に

弊社担当からお伝えしたAPIキーとストア名をご用意ください

# GTM 経由でプレースホルダー タグを追加する

# 1. カスタム HTML タグを作成する

カスタム HTML タグを作成するには、「ワークスペースから新しいタグを追加」を選択します

サンプル

[タグ設定] をクリックし、タグの種類として [カスタム HTML] を選択します。

サンプル

# 2. JavaScript を使用して商品ページにタグを挿入します。

この例では、クラス名 target-div を持つ div を選択して、プレースホルダー タグを追加します。 プレースホルダ ID は次のとおりです vs-placeholder-inpage、 vs-placeholder-inpage-mini、 vs-placeholder-smart-table、 使用している製品に応じて

  • 例
<script>
  var vsPlaceholderInpage = document.createElement("div"); //creates the placeholder element
  vsPlaceholderInpage.id = "vs-placeholder-inpage"; //placeholder ID
  var vsPlaceholderTarget = document.querySelector(".target-div") //target element on where to place the vs widgets
  vsPlaceholderTarget.appendChild(vsPlaceholderInpage) // appends the widget to target element
</script>

# 3. タグを起動するタイミングのトリガーを選択します。 たとえば、「すべての製品ページ」を選択します。

# vs-value の挿入

# 1. 変数を作成する

GTMのデフォルト変数を使用してVirtusizeと連携をいたします。 必要な変数が利用できない場合は、変数メニューをクリックし、ユーザー定義変数セクションから「新規」を選択して、新しいカスタム変数を作成できます。

サンプル

  1. 変数タイプとして「データレイヤー変数」を選択します。
  2. 変数に名前を付けます (例: 「vs-product-id」)。
  3. [データ レイヤー変数名] フィールドに、キャプチャする値を保持するデータ レイヤー キーの名前を入力します。 この場合、ecommerce オブジェクトの下の製品の ID を取得しています。 (例: ecommerce.detail.products.0.id)。
  4. 変数を保存します。

サンプル

# 2. カスタム HTML を作成して変数を挿入する

カスタム HTML 内で変数を設定できるようになりました。 GTM によって提供されるデフォルトのものを使用することも、新しい変数を作成して必要なその他のデータをフェッチすることもできます。 以下の例では、customer-id、vs-product-id、および vs-product-image-url 変数が作成され、カスタム HTML 内で使用されています。

  • 例
<input type="hidden" id="vs-product-id" value="{{vs-product-id}}" />
<input type="hidden" id="vs-user-id" value="{{customer-id}}" />
<input type="hidden" id="vs-product-version" value="1" />
<input
  type="hidden"
  id="vs-product-image-url"
  value="{{vs-product-image-url}}"
/>

<script type="text/javascript">
var vsStoreName = "YOUR_STORE_NAME";
var vsEnv = "YOUR_ENVIRONMENT";
var vsDeviceType = "YOUR_DEVICE_TYPE";

(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>

| 番号 | ID名 | 説明 | | -- | -------------------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ----- | | 1 | vs-user-id | GTMのカスタマーID | | 2 | vs-product-id | 製品ID | | 3 | vs-product-version | 製品のバージョン。 通常、これは製品の発売日として設定されます。 不明な場合は「1」を設定してください。 製品のバージョンが変更されると、製品情報は自動的に再解析されます。 | | 4 | vs-product-image-url | 商品の「.jpg」または「.png」形式の URLを設定ください。 これは、Virtusizeで表示されるメイン画像になります。 |

  • Google アナリティクスに複数のトラッカーを使用している場合は、Google アナリティクスの送信に使用する トラッカー名 または トラッカー ID を提供してください。トラッカー情報が提供されない場合は、最初に見つかったトラッカーが使用されます。

以下の内容のinputタグを追加ください。

no id name explanation
1 vs-ga-tracker トラッカー名もしくはトラッカーID
  • 例
// パターン１（トラッカー名を設定）
<input type="hidden" id="vs-ga-tracker" value="gtm1" />

// パターン２（トラッカーIDを設定）
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />

# 3. タグを起動するタイミングのトリガーを選択します。 たとえば、「すべての製品ページ」または特定のページを選択します。

この例では、特定のページに対してのみスクリプトをトリガーしたいと考えています。 サンプル

# 4. 検証

統合が完了したら、URL を営業担当者と共有してください。 共有したいバージョンを見つけて、「その他のアクション」をクリックし、「プレビューの共有」を選択します。

← Google Tag Manager(GTM)を用いて購入完了ページにバーチャサイズタグを実装する →