# 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と連携をいたします。 必要な変数が利用できない場合は、変数メニューをクリックし、ユーザー定義変数セクションから「新規」を選択して、新しいカスタム変数を作成できます。
- 変数タイプとして「データレイヤー変数」を選択します。
- 変数に名前を付けます (例: 「vs-product-id」)。
- [データ レイヤー変数名] フィールドに、キャプチャする値を保持するデータ レイヤー キーの名前を入力します。 この場合、ecommerce オブジェクトの下の製品の ID を取得しています。 (例: ecommerce.detail.products.0.id)。
- 変数を保存します。
# 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 |
- 例
// パターン1(トラッカー名を設定)
<input type="hidden" id="vs-ga-tracker" value="gtm1" />
// パターン2(トラッカーIDを設定)
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />
# 3. タグを起動するタイミングのトリガーを選択します。 たとえば、「すべての製品ページ」または特定のページを選択します。
この例では、特定のページに対してのみスクリプトをトリガーしたいと考えています。
# 4. 検証
統合が完了したら、URL を営業担当者と共有してください。 共有したいバージョンを見つけて、「その他のアクション」をクリックし、「プレビューの共有」を選択します。