Google タグマネージャ(以下GTM)を利用したKARTEタグ導入について解説します。
事前にGoogle タグマネージャへ登録し、KARTEタグを埋め込むサイトをコンテナへ登録してください。
※GTMの利用方法については、Google タグマネージャ ヘルプサイトをご覧ください。
カートASPをご利用の場合、ご利用のサービスによって設定方法が異なります。

注意事項

配信順

GTMでは配信!!優先度!!の数値が大きい順に配信されます。
各種KARTEタグに利用するための変数、計測タグ、その他KARTEタグの実行順が前後する事によって値が正しく連携されない事がありますので、ご注意ください。

  1. KARTE計測タグ
  2. KARTEで利用する各種変数(任意)
  3. イベントタグ、ユーザータグ、コンバージョンタグ等、計測タグ以外のKARTEタグ(任意)

直書きとの併用

KARTEのタグの一部をGTMで、一部をページに直接記述で設置するのは、非推奨とさせていただいています。どちらかに記述を寄せなければ、配信順を厳密に制御することが難しいためです。

タグの設定

設定項目は主に以下3種類です。

  • タグ : 設置するタグ
  • トリガー : 配信ページ等の条件
  • 変数 : カスタムイベントタグやユーザータグ、コンバージョンタグに設定する変数(値)

計測タグの設定

  1. 左メニューの「タグ」から新規タグを作成。
  2. タグタイプ「カスタムHTMLタグ」を選択。
  3. 「HTML」入力欄に「計測タグ」を記述。
    「計測タグ」はKARTE管理画面のタグ・イベントの設定ページから取得できますので、そちらからコピーして貼り付けてください。計測タグに含まれるAPIキーは個別で異なります。必ずご自身のサイトから計測タグを取得をするようご注意ください。
  4. 「詳細設定」をクリックし、「タグ配信の!!優先度!!」に「10」を設定。
    ※配信!!優先度!!の数値は適宜ご自身のサイトに合わせてご設定ください。
  5. 「トリガー」は「All Pages(ページビュー)」を選択。

ユーザータグの設定

ユーザータグの設置には、KARTEへ送信するユーザーデータの出力設定が必要になります。
ここでは、各サイト側にて出力されたデータをGTMを利用しKARTEへ送信する方法についてご説明します。
ユーザータグの構成については、ユーザータグの設置をご覧ください。

  1. ユーザータグを設置するページと送信するデータを決める。
    ユーザータグを設置するページは確実にユーザーがログインしているページにするようにしてください。
    また、KARTEへデータ送信する際は、確実にデータを参照出来るようにしてください。
    ※データ参照時の参照不可のエラーにより、KARTEタグ自体が動作しなくなる場合があります。
  2. GTMへ送信するデータをサイト側で出力する。
    サイト側のシステムにてGTMのdataLayerへ値を挿入する処理を記述します。
    ※Objectに記載するkeyはGTM側の設定にて使用します
var dataLayer = dataLayer || [];
dataLayer.push({
  user_id : 'q1w2e3r4',
  name : '軽手 太郎',
  email : 'taro.karte@karte.io',
    birth_date: new Date('1880/01/01')
});

 ※送信する内容は適宜変更してください。
3. GTMにて2で送信した変数を参照する設定をする
1. メニューの「変数」から「ユーザー定義変数」の「追加」をクリック。

2. 変数名を指定(初期値は「名前のない変数」。ここで指定した変数名はタグ内からの参照に使用します。)
3. 変数タイプを「ページ変数」の「データレイヤーの変数」を選択。

4. データレイヤーの変数名に2で設定した各種keyを記述
5. 「保存」をクリック。

4. トリガーの作成
1. メニューの「トリガー」から「新規」をクリック

2. トリガーのタイプ「ページビュー」から「ページビュー」を選択
※ 変数の参照がページビューの段階では出来ない場合は、適宜変更してください。

3. トリガーの発生場所「一部のページビュー」を選択。
4. 「Page URL / 含む / {確実にログインしているページのURL}」を設定
5. 「保存」をクリック。

5. タグの設定
1. 「1 タグタイプを選択」より「カスタムHTMLタグ」を選択。
2. 「2 タグを設定」の「HTML」入力欄に「ユーザータグ」を記述。
  その際、2~3で設定した変数をGTMの参照方法に則って記述。

<script type="text/javascript">
try{
    tracker.user({
        user_id: "{{ユーザーID}}",
        name: "{{氏名}}",
        email: "{{メールアドレス}}",
        birth_date: {{誕生日}}
    });
}catch(e){
     if('tracker' in window){
         tracker.track('_error',{
            message: e.message
        });
    }
}
</script>

 ※送信する内容は適宜変更してください(日付型の場合はダブルクオテーションを入れない、など)。
 ※3の「変数を参照する設定」にて変数名をそれぞれ「ユーザーID」「氏名」「メールアドレス」「誕生日」と設定した場合
6. 「詳細設定」をクリックし、「タグ配信の優先度」に「0」を設定。
※配信優先度の数値は適宜ご自身のサイトに合わせてご設定ください。
7. 「配信するタイミング」に4で作成したトリガーを指定。

コンバージョンタグの設定

コンバージョンタグの設置には、KARTEへ送信するコンバージョンデータ(購買情報等)の出力設定が必要になります。
ここでは、各サイト側にて出力されたデータをGTMを利用しKARTEへ送信する方法についてご説明します。
コンバージョンタグの構成については、コンバージョンタグの設置をご覧ください。

  1. 送信するデータを決める。
    KARTEへデータ送信する際は、確実にデータを参照出来るようにしてください。
    ※データ参照時の参照不可のエラーにより、KARTEタグ自体が動作しなくなる場合があります。
  2. GTMへ送信するデータをサイト側で出力する。
    サイト側のシステムにてGTMのdataLayerへ値を挿入する処理を記述します。
    ※Objectに記載するkeyはGTM側の設定にて使用します
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
});

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

  1. GTMにて2で送信した変数を参照する設定をする
    1. メニューの「変数」から「ユーザー定義変数」の「追加」をクリック。
    2. 変数名を指定(初期値は「名前のない変数」。ここで指定した変数名はタグ内からの参照に使用します。)
    3. 変数タイプを「ページ変数」の「データレイヤーの変数」を選択。
    4. データレイヤーの変数名に2で設定した各種keyを記述
    5. 「保存」をクリック。
  2. トリガーの作成
    1. メニューの「トリガー」から「新規」をクリック
    2. トリガーのタイプ「ページビュー」から「ページビュー」を選択
      ※ 変数の参照がページビューの段階では出来ない場合は、適宜変更してください。
    3. トリガーの発生場所「一部のページビュー」を選択。
    4. 「Page URL / 含む / {コンバージョンページのURL}」を設定
    5. 「保存」をクリック。
  3. タグの設定
    1. 「1 タグタイプを選択」より「カスタムHTMLタグ」を選択。
    2. 「2 タグを設定」の「HTML」入力欄に「ユーザータグ」を記述。
        その際、2~3で設定した変数をGTMの参照方法に則って記述。
 <script type="text/javascript">
try{
    tracker.buy({
        transaction_id : {{トランザクションid}},
        revenue : {{購入金額}},
        items: {{購入アイテム}}
});
}catch(e){
     if('tracker' in window){
         tracker.track('_error',{
            message: e.message
        });
    }
}
</script>

 ※送信する内容は適宜変更してください。
6. 「詳細お設定」をクリックし、「タグ配信の優先度」に「0」を設定。
※配信優先度の数値は適宜ご自身のサイトに合わせてご設定ください。
7. 「配信するタイミング」に4で作成したトリガーを指定。

ヒント

  • サイト側の変数が「ページビュー」や「DOM Ready」で参照出来ない場合は、カスタムイベントをトリガーにすることで確実に参照できるように設定可能です。
  • システムの都合上データレイヤー変数を利用出来ない場合は、javascript変数などその他変数をご検討ください。