> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/testing/integration/iw27cn21l3.md).

# GTM(カスタムイベント) によるVWOとUAの連携

VWOをGoogleタグマネージャー (GTM) と連携すると、VWOキャンペーン データをGoogle ユニバーサル アナリティクス (UA) やその他の分析ツールに送信できるようになります。

{% hint style="warning" %}
非推奨の同期SmartCode がWeb ページに設置されている場合、連携は機能しません。
{% endhint %}

次の2つの方法で、GTMを使用してVWOデータをUAに送信できます。

1. ユーザーレベルでカスタムディメンションを設定し、カスタムレポートを作成します。これはデフォルトの方法であり、VWOテストごとに異なるタグ、変数、トリガーを作成する必要があります。これを行う方法については、  [「Google タグ マネージャーを使用した VWO と UA の連携(カスタム ディメンション)」](https://help.vwo.com/hc/en-us/articles/360021117934)を参照してください。
2. データレイヤー変数を作成し、すべてのテストデータとバリエーションデータをGTMタグを通してイベントとしてプッシュします。これは、キャンペーンごとに個別のデータレイヤー変数とカスタムディメンションを設定するのを避けるための1回限りの連携プロセスです。この連携設定は、次の4つのステップで行います。

　　**・データレイヤー変数の作成**\
　　**・イベントの起動ルール作成**\
　　**・GTMタグの作成**\
　　**・VWOでGTM連携を有効にする**

### **データレイヤー変数の作成** <a href="#id-1" id="id-1"></a>

GTM連携を開始するには、GTMアカウントにログインし、次の4つのデータレイヤー変数をデフォルト値0で作成します。これらの変数は、後のステップでタグを作成し、イベントを実行するトリガーを定義するために使用されます。

#### ・キャンペーンID

\[campaignId]フィールドで、次のように設定します。

1. タイトル: **Cid**
2. データレイヤー変数名: **CampaignId**
3. データレイヤーバージョン: **Version 1**
4. デフォルト値を設定: オプションを選択し、値を**0** (ゼロ) として入力します。

<figure><img src="/files/582atrwXBFfbqLe5JrF2" alt=""><figcaption></figcaption></figure>

#### ・バリエーションID

\[variationId]フィールドで、次のように設定します。

1. タイトル: **Vid**
2. データレイヤー変数名: **VariationId**
3. データレイヤーバージョン: **Version 1**
4. デフォルト値を設定: オプションを選択し、値を**0** (ゼロ) として入力します。

<figure><img src="/files/wCyq1BFvJpASgy7KI0H8" alt=""><figcaption></figcaption></figure>

#### ・バリエーション名

\[variationName] フィールドで、次のように設定します。

1. タイトル: **Vname**
2. データレイヤー変数名: **VariationName**
3. データレイヤーバージョン: **Version 1**
4. デフォルト値を設定: オプションを選択し、値を**0** (ゼロ) として入力します。

<figure><img src="/files/glnWZ5ZohomBrZtFNAID" alt=""><figcaption></figcaption></figure>

#### ・キャンペーン名

\[campaignName] フィールドで、次のように設定します。

1. タイトル: **CName**
2. データレイヤー変数名: **CampaignName**
3. データレイヤーバージョン: **Version 1**
4. デフォルト値を設定: オプションを選択し、値を**0** (ゼロ) として入力します。

<figure><img src="/files/Q5QVYMkSyYHnGGAIGFqL" alt=""><figcaption></figcaption></figure>

### イベントの起動ルール作成 <a href="#id-2" id="id-2"></a>

トリガーとも呼ばれる起動ルールは、タグに対するイベントを起動するかどうかを評価する条件です。VWOがキャンペーン データをGTMにプッシュできるようにする次の2つのイベント ルールを作成します。

1. 次のフィールドを構成して、キャンペーン ID データ変数の起動ルールを作成します。

* トリガー名: **VWO Generic**
* \[トリガー タイプ] で、**\[カスタム イベント]**&#x3092;選択します。

{% hint style="warning" %}
**\[カスタム イベント]**&#x30C6;キストボックスをクリックし、オプションが表示されるまで待ちます。必要なものを選択してください。
{% endhint %}

* **イベント名を**「VWO」と入力します。イベント名は常に VWO である必要があります。

{% hint style="warning" %}
このイベントは VWOライブラリに保存され、GTM連携がテストで有効になったときにプッシュされます。
{% endhint %}

* \[このトリガーが発生する] フィールドで、 \[一部の**カスタム イベント]**&#x3092;選択します。
* 次のフィールドでは、すでに作成されている**CampaignId**変数 (Cid) を選択し、条件が 0 (ゼロ) に等しいにします。

<figure><img src="/files/Rz7onDpf8IJFBVnQSCdD" alt=""><figcaption></figcaption></figure>

2. 次のフィールドを構成して、キャンペーン ID およびバリエーション ID データ変数の別の実行ルールを作成します。

* トリガー名: **VWO Data Push**
* \[トリガー タイプ] で、**\[カスタム イベント]**&#x3092;選択します。
* イベント名を**VWO-data-push**として記述します。イベント名は常に VWO-data-push である必要があります。
* \[このトリガーが発生する] フィールドで、 \[一部の**カスタム イベント]**&#x3092;選択します。
* 次のフィールドで、**CampaignId** (Cid) 変数と**variationId** (Vid) 変数を選択し、条件を「0 (ゼロ) に等しくない」に設定します。

<figure><img src="/files/71tnwTOnM5e7QnDpTjqH" alt=""><figcaption></figcaption></figure>

### GTMタグの作成 <a href="#id-3" id="id-3"></a>

タグは変数によって取得され、トリガーによって起動されたデータを、最終的に Google Analyticsなどの分析ツールにプッシュするコード スニペットです。GTMダッシュボードでプロセスを完了するには、次の2つのタグを作成します。

1. VWO-GTM連携

* **GTMダッシュボードで\[タグ]**&#x3092;クリックし、**\[新規]**&#x3092;選択します。
* **\[タグ設定**を編集] を選択し、\[カスタム HTML タグ] オプションを選択します。
* 次のカスタム コードを入力します。

```
<script type = "text/javascript" >
  /* VWO GTM integration code starts */
  (function() {
    window.VWO = window.VWO || [];
    window.dataLayer = window.dataLayer || [];
    window.VWO.push(['onVariationApplied', function(data) {
      if (!data) {
        return;
      }
      var expId = data[1],
        variationId = data[2];
      if (typeof(_vwo_exp[expId].comb_n[variationId]) !== 'undefined' && _vwo_exp[expId].GTM) {
        window.dataLayer.push({
          "CampaignId": expId,
          "CampaignName": _vwo_exp[expId].name,
          "VariationId": variationId,
          "VariationName": _vwo_exp[expId].comb_n[variationId]
        });
        window.dataLayer.push({
          event: 'VWO-data-push'
        });
      }
    }]);
  })();
/* VWO GTM integration code ends */
</script>
```

* **\[トリガー]**&#x30DA;インをクリックし、トリガーの起動とし&#x3066;**\[VWO Generic]を選択します。**

<figure><img src="/files/J2r6XkKjGbB1pUuHrmLi" alt=""><figcaption></figcaption></figure>

2. VWO-UA-統合:

* **GTMダッシュボードで\[タグ]**&#x3092;クリックし、**\[新規]**&#x3092;選択します。
* **\[タグ設定**を編集] を選択し、  **\[ユニバーサル アナリティクス**タグ] オプションを選択します。
* **\[トラック**タイプ]で、**\[イベント]**&#x3092;選択します。
* **\[カテゴリ]**&#x3067;**\[VWO]**&#x3092;選択します。
* アクション: **{{Cid}}:{{CName}}**
* ラベル: **{{Vid}}:{{Vname}}**
* 値: 空のままにしておきます
* 非インタラクションヒット: **True**
* **「このタグで設定の上書きを有効にする**」オプションを選択します
* **トラッキング ID:**&#x3053;のフィールドに、プッシュするデータのトラッキング ID を入力します。たとえば下記画像の場合、UA追跡IDはUA-1234567-1になります。
* **トリガー**: VWOデータプッシュトリガーを選択します。

<figure><img src="/files/iIuZWcQIktt971hXMPKH" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
&#x20;Webサイトがシングルページアプリケーション (SPA) である場合、Google Analyticsでトラフィック ソースの誤った割り当てが観察される可能性があります。これを解決するには、[このブログ](https://www.simoahava.com/gtm-tips/fix-rogue-referral-problem-single-page-sites/)を参照してください。
{% endhint %}

これは、GTMタグを使用してすべてのテストデータをプッシュするための 1 回限りの連携です。また、テストのGTM連携オプションを有効にする必要があります。アナリティクスアカウントでデータを表示するには、以下のセグメントを設定してください。

#### 手順

1. GoogleAnalytics（UA）アカウントにログインします。&#x20;
2. 左側のパネルから、**\[ユーザー]** > **\[概要]**&#x306B;移動します。
3. **\[+セグメントの追加]** > **\[新しいセグメント]**&#x3092;クリックしてセグメントを追加します。
4. 右上隅から、キャンペーンが実施されていた日付を指定します。&#x20;
5. **\[条件]** > **\[ユーザー]**&#x3092;クリックして条件を指定します。

<figure><img src="/files/MMS37MTaek7TB4PzTUAA" alt=""><figcaption></figcaption></figure>

6. 最初のドロップダウンか&#x3089;**\[イベント アクション]**&#x3092;選択し、2番目のドロップダウンから \[**含む]を選択します。**&#x6B21;に、空白のフィールドをクリックして、自動入力されたリストからキャンペーン名を選択します。
7. **AND**演算子を選択してイベント ラベルを追加します
8. &#x20;最初のドロップダウンか&#x3089;**\[イベント ラベル]**&#x3092;選択し、 2番目のドロップダウンから \[**含む]を選択します。**&#x6B21;に、空白のフィールドをクリックして、自動入力されたリストからバリアント名を選択します。

{% hint style="warning" %}
それぞれのバリエーションについて追跡されているデータを見るために、1つずつ選択することができます。
{% endhint %}

<figure><img src="/files/r60eQ8viwx3bPrGOjBET" alt=""><figcaption></figcaption></figure>

### **VWOでGTM連携を有効にする** <a href="#id-4" id="id-4"></a>

GTMの設定が完了したので、VWOダッシュボードから GTM連携を有効にします。

{% hint style="warning" %}
同じURLで複数のキャンペーンを実行している場合、すべてのキャンペーン データに対して GAイベントが発生します。
{% endhint %}

#### 手順

1. VWOアカウントにログインします。
2. **\[テスト]**&#x306B;移動し、テストタイプ (たとえば**A/B )**&#x3092;選択します。
3. **\[integration（連携）]**&#x304B;ら、**\[Googleタグ マネージャー]**&#x306B;チェックをいれます。 選択肢として表示されない場合は、連携設定が有効になっていないため、次の注意事項をご確認ください。

<figure><img src="/files/8LrrGkkvq9JIRP5cTYPF" alt=""><figcaption><p>新インターフェース：連携</p></figcaption></figure>

{% hint style="warning" %}
**Googleタグ マネージャー**オプションは、 **\[連携]**&#x30BB;クションで有効にした後に表示されます 。
{% endhint %}

<figure><img src="/files/5q1cB0rfgvtzKfPcbqL1" alt=""><figcaption></figcaption></figure>

※本ページは\[[原文:Integrating VWO with Google Universal Analytics Using Google Tag Manager (Custom Events)](https://help.vwo.com/hc/en-us/articles/360021308973-Integrating-VWO-with-Google-Universal-Analytics-Using-Google-Tag-Manager-Custom-Events-)]を翻訳・加筆修正しています。