Virtusize ガイド

# Google Tag Managerを用いた商品詳細ページへの実装

このページでは、Google Tag Manager (GTM) を使用して、ウェブサイトの商品詳細ページ (PDP) に Virtusize を実装する手順を 5 つのステップで説明します。

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

2. プレースホルダータグの追加

現在、Virtusizeサービスでは6 種類のウィジェットボタンをサポートしています：

  • Inpage Standard
  • Inpage Minimal
  • Smart Table
  • Fitting Room Recommend
  • Fitting Room Discovery
  • Kids

このウィジェットはページのどこにでも配置できます。プレースホルダータグを使用して配置を指定することをお勧めします。プレースホルダータグを追加することで、今後ボタン位置を変更されたい場合、クライアント様にてプレースホルダータグを移動していただくことで Virtusize ウィジェットを壊すことなく自由に変更できます。

3. Virtusize valueの挿入

このステップでは、Virtusize が適切に動作するために必要な値を設定できるカスタム変数を定義します。

4. Virtusize スクリプトの統合

このスクリプトは、ウィジェットを表示するために必要な中央アプリケーションを呼び出すためのものです。

5. 検証

# 始める前に

Virtusize担当者に、APIキーとStore Nameをお尋ねください

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

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

サンプル

タグ構成をクリックし、タグの種類として カスタム HTML を選択します。

サンプル

# 2. プレースホルダータグの追加

Virtusizeの表示位置については、事前にVirtusize担当者とすり合わせします。

Virtusize Inpage Standard ウィジェットを実装する場合は、次の JavaScript コードを使用し、inpage-target-div を Inpage Standard ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("inpage-target-div").innerHTML = '<div id="vs-placeholder-inpage"></div>';
</script>

Virtusize Inpage Minimal ウィジェットを実装する場合は、次の JavaScript コードを使用し、inpage-mini-target-div を Inpage Minimal ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("inpage-mini-target-div").innerHTML = '<div id="vs-placeholder-inpage-mini"></div>';
</script>

Virtusize Smart Table (ST) ウィジェットを実装する場合は、次の JavaScript コードを使用し、smart-table-target-div を Smart Table ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("smart-table-target-div").innerHTML = '<div id="vs-placeholder-smart-table"></div>';
</script>

Virtusize Fitting Room Recommend (FRR) ウィジェットを実装する場合は、次の JavaScript コードを使用し、frr-target-div を Fitting Room Recommend ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("frr-target-div").innerHTML = '<div id="vs-placeholder-frr"></div>';
</script>

Virtusize Fitting Room Discovery (FRD) ウィジェットを実装する場合は、次の JavaScript コードを使用し、frd-target-div を Fitting Room Discovery ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("frd-target-div").innerHTML = '<div id="vs-placeholder-frd"></div>';
</script>

Virtusize Kids ウィジェットを実装する場合は、次の JavaScript コードを使用し、kids-target-div を Kids ウィジェットを配置したいターゲット要素に置き換えてください。

<script>
  document.querySelector("kids-target-div").innerHTML = '<div id="vs-placeholder-kids"></div>';
</script>

完了したら、タグを発火するタイミングのトリガーを選択します。たとえば、「すべての商品ページ」または特定のページを選択します。

# 3. Virtusize valueの挿入

GTM から提供されるデフォルトの変数が Virtusize 実装で使用できます。必要な変数がない場合は、変数メニューをクリックし、ユーザー定義変数セクションで New を選択して、新しいカスタム変数を作成できます。

サンプル

  1. 変数の種類として データレイヤー変数 を選択します。
  2. 変数に名前を付けます（例：vs-product-id）。
  3. データレイヤー変数名 フィールドに、取得したい値を保持するデータレイヤーキーの名前を入力します。この場合、ecommerce オブジェクトの下にある商品の id を取得します。（例：ecommerce.detail.products.0.id）。
  4. 変数を保存します。

サンプル

# 4. Virtusize スクリプトの統合

カスタム HTML 内で変数を設定できます。GTM によって提供されるデフォルトの変数を使用するか、他の必要なデータを取得するために新しい変数を作成できます。以下の例では、vs-user-id、vs-product-id、vs-product-version 変数を作成してカスタム HTML 内で使用しています。

<script type="text/javascript">
const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "{{vs-user-id}}",
  product: { id: "{{vs-product-id}}" version: "{{vs-product-version}}" },
  page: "pdp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http'

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.jp/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();
</script>
値 説明
STORE_NAME これは、営業担当者から受け取った Store Name です。
ENVIRONMENT 実装している環境に応じて、staging または production のいずれかを設定します。
DEVICE_TYPE ページにアクセスしているデバイスの種類に応じて、desktop または mobile のいずれかを設定します。サイトがレスポンシブで、デスクトップとモバイルの両方のデバイスに同じリソースを提供している場合、これを desktop に設定してください。
vs-user-id - ユーザーがログインしていない場合は、空の文字列 ('') を設定します。
- ユーザーがログインしている場合は、ユーザーのIDを（MD5、SHA-1などのハッシュ関数を使用して）設定します。
vs-product-id 商品ID。必ず商品詳細ページに設定した商品IDと同じものにしてください。このIDが異なると、Virtusize経由で購入された製品か判別出来なくなります。
vs-product-version 商品のバージョンを設定ください。商品情報が更新された際にこちらの値も同時に更新更新されると、 Virtusize サーバー内の商品情報が自動更新され、Virtusizeに変更が反映されます。　例）掲載時のタイムスタンプ：202202162028

完了したら、タグを発火するタイミングのトリガーを選択します。たとえば、「すべての商品ページ」または特定のページを選択します。

この例では、特定のページに対してスクリプトを発火させたいです。

サンプル

# 5. 検証

すべての実装が完了したら、商品詳細ページのURLをVirtusize担当者に共有してください。

そのためには、その他の操作 をクリックし、共有プレビュー を選択して、共有したいバージョンを見つけます。

← Google Tag Managerによる購入完了ページの実装 →