# Google Tag Managerを用いたトップページへの実装

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

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

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

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

Fitting Room Discovery

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

3. Virtusize valueの挿入

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

4. Virtusize スクリプトの統合

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

5. 検証

# 始める前に

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

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

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

サンプル

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

サンプル

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

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

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

<script>
  const targetDiv = document.querySelector(".frd-target-div");

  if (targetDiv) {
    targetDiv.append(Object.assign(document.createElement("div"), { className: "vs-placeholder-frd" }));
  }
</script>

完了したら、タグを発火するタイミングのトリガーを選択します。

# 3. Virtusize valueの挿入

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

サンプル

変数の種類として データレイヤー変数 を選択します。
変数に名前を付けます（例：vs-user-id）。
データレイヤー変数名 フィールドに、取得したい値を保持するデータレイヤーキーの名前を入力します。
変数を保存します。

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

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

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

(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などのハッシュ関数を使用して）設定します。

完了したら、タグを発火するタイミングのトリガーを選択します。

# 5. 検証

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

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

← トップページの統合購入履歴をインポートする →