Google タグマネージャ(以下GTM)を利用したKARTEタグ導入について解説します。

注意事項

  • GTMの利用方法については、Google タグマネージャ ヘルプサイトをご覧ください。
  • カートASPをご利用の場合、ご利用のサービスによって設定方法が異なります。
  • GTMの利用が開始している状態を前提としたドキュメントとなります。

配信順について

GTMでは配信優先度の数値が大きい順にタグを配信する機能があります。

基本的に、KARTEの計測タグを一番大きな配信優先度とし、それ以外のタグ（ユーザータグやカスタムイベントタグ）などは、相対的に小さな配信優先度にして、配信順のコントロールをお願いします。

直書きとの併用について

KARTEの計測タグの一部をGTMで、一部をページに直接記述するといったタグ直書きとの併用はおやめください。 タグの配信順序がコントロールできなくなるため、動作が不安定になるケースが確認されています。

GTMのdataLayerを使ったタグの設定方法

前提

  • ここでは、次の3つのタグを設置する想定で設定方法を紹介します
  • タグの発火タイミングを柔軟に制御するため、GTMのdataLayerとカスタムイベントトリガーの利用を前提に紹介します

WebサイトとGTMとKARTEの役割分担

KARTEのviewイベント以外のイベントでは、Webページ上のデータ（商品情報、ユーザー情報など）をタグに含めて発火すべきケースが多いです。

そのとき、Webサイト、GTM、KARTEの3者は、次のような流れで連携されます。
（ここでは、サイト上でuser_idを取得し、KARTEにユーザータグでuser_idを連携する例を示します。）

  1. [Webページ] ページビュー時に、GTMのスニペットタグが読み込まれる
  2. [GTM] ページビューをトリガーに、KARTEの計測タグが発火される
  3. [KARTE] viewイベントを受け取る
  4. [Webページ] GTMのdataLayerにuser_idとGTMカスタムイベントをpushする
  5. [GTM] カスタムイベントをトリガーに、KARTEのユーザータグが発火される
    • このとき、dataLayerで受け取ったuser_idがタグに埋め込まれる
  6. [KARTE] 個人情報（identify）イベントを受け取る

特に、KARTEに連携したい情報がそもそもWebページ上に出力されていない場合は、Webサイト側の改修が必要になります。

計測タグの設定

  1. 左メニューの「タグ」から新規タグを作成。
    null

  2. タグタイプ「カスタムHTMLタグ」を選択。

  3. 「HTML」入力欄に「計測タグ」を記述。
    ご自身のKARTEプロジェクトの計測タグの取得方法についてはこちら
    null

  4. 「詳細設定」をクリックし、「タグ配信の優先度」に「10」を設定。
    null

  5. 「トリガー」は「All Pages（ページビュー）」を選択。
    null

ユーザータグの設定（例）

ユーザータグの仕様については、ユーザータグの設置をご覧ください。

  1. ユーザータグを設置するページと送信するデータを決める。

  2. GTMのDatalayer変数へユーザー情報をセットする。

var dataLayer = dataLayer || [];
dataLayer.push({
    user_id : 'q1w2e3r4',
    name : '軽手 太郎',
    email : 'taro.karte@karte.io'
});

  1. GTMにて2で送信した変数を参照する設定をする

    1. メニューの「変数」から「ユーザー定義変数」の「追加」をクリック。
      null

    2. 変数名を指定

    3. 変数タイプを「ページ変数」の「データレイヤーの変数」を選択。
      null

    4. データレイヤーの変数名に2で設定した各種keyを記述。

    5. 「保存」をクリック。
      null

  2. トリガーの作成

    1. メニューの「トリガー」から「新規」をクリック
      null
    2. トリガーのタイプ「ページビュー」から「ページビュー」を選択

    ※ 変数の参照がページビューの段階では出来ない場合は、適宜変更してください。
    null

    1. トリガーの発生場所「一部のページビュー」を選択。
    2. 「Page URL ／　含む　／　DataLayer変数が発生しているページのURL」を設定
    3. 「保存」をクリック。
      null

  3. タグの設定

    1. 「1 タグタイプを選択」より「カスタムHTMLタグ」を選択。
    2. 「2 タグを設定」の「HTML」入力欄に「ユーザータグ」を記述。

　　その際、2~3で設定した変数をGTMの参照方法に則って記述。

<script type="text/javascript">
try{
    tracker.user({
        user_id: "{{ユーザーID}}",
        name: "{{氏名}}",
        email: "{{メールアドレス}}"
    });
}catch(e){
        if('tracker' in window){
            tracker.track('_error',{
            message: e.message
        });
    }
}
</script>
- 送信する内容は適宜変更してください（日付型の場合はダブルクオテーションを入れない、など）。
- 3の「変数を参照する設定」にて変数名をそれぞれ「ユーザーID」「氏名」「メールアドレス」「誕生日」と設定した場合
  1. 「詳細設定」をクリックし、「タグ配信の優先度」に「0」を設定。
  2. 「配信するタイミング」に4で作成したトリガーを指定。
ユーザータグでは、

- [ユーザー情報（attribute）イベントタグの設置 | KARTEサポートサイト](https://support.karte.io/post/1X39NRwR0HXzCtigtRrbLJ#2-0)

購入（buy）イベントタグの設定（例）

購入（buy）イベントタグの設置には、KARTEへ送信する購買情報の出力設定が必要になります。

ここでは、各サイト側にて出力されたデータをGTMを利用しKARTEへ送信する方法についてご説明します。
購入（buy）イベントタグの詳細については、こちらをご覧ください。

  1. 送信するデータを決める。
    KARTEへデータ送信する際は、確実にデータを参照出来るようにしてください。

  2. GTMへ送信するデータをサイト側で出力する。
    サイト側のシステムにてGTMのdataLayerへ値を挿入する処理を記述します。

<script type="text/javascript">
var dataLayer = dataLayer || [];
var items = [{
    item_id: "0001",
    name: "KARTE Tシャツ 黒",
    price: 5000,
    quantity: 1,
    category: "catA",
    brand: "brandA"
}];
dataLayer.push({
    transaction_id : '00001',
    revenue : 10000,
    items: items
});
</script>

　※送信する内容は適宜変更してください。

  1. GTMにて2で送信した変数を参照する設定をする
    ユーザータグとほぼ同じ設定になるため割愛します

上記のコード例でDatalayerを設定していた場合、以下のように定義したとします

  • transaction_id
  • revenue
  • items

  1. トリガーの作成
    ユーザータグとほぼ同じ設定になるため割愛します

  2. タグの設定

　1. 「1 タグタイプを選択」より「カスタムHTMLタグ」を選択。
　2. 「2 タグを設定」の「HTML」入力欄に「ユーザータグ」を記述。

<script type="text/javascript">
try{
    tracker.buy({
        transaction_id: {{transaction_id}},
        revenue: {{revenue}},
        items: {{items}}
});
}catch(e){
        if('tracker' in window){
            tracker.track('_error',{
            message: e.message
        });
    }
}
</script>

　※送信する内容は適宜変更してください。

  1. 「詳細を設定」をクリックし、「タグ配信の優先度」に「0」を設定。

  2. 「配信するタイミング」に4で作成したトリガーを指定。

プレビューモードで設定を確認する

設定が完了したら「GTMのプレビューモード」を利用して、KARTEのタグが正しく配信されていることを確認すると良いでしょう。

以上でGTMを使ったタグ設置は完了です。

ヒント

  • サイト側の変数が「ページビュー」や「DOM Ready」で参照出来ない場合は、変数が準備できた段階でGTMのカスタムイベント発生させ、そのカスタムイベントをトリガーにタグを配信してください
  • システムの都合上データレイヤー変数を利用出来ない場合は、JavaScript変数などその他変数をご利用ください