本ページは Google タグマネージャ(以下GTM) の利用を開始している状態を前提としています。

概要

GTMを利用したKARTEタグ導入について解説します。

GTMが未設定の場合
Google タグマネージャ ヘルプサイト などを参考に設定をお願いします。

配信順について
GTMでは配信優先度の数値が大きい順にタグを配信する機能があります。
基本的にKARTEの計測タグを一番大きな配信優先度とし、配信順のコントロールをお願いします。

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

カートASPをご利用の場合
カートASP をご参照ください。

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

WebサイトからKARTEのタグにデータを連携する代表的な方法として、ここではGTMのdataLayerを使った方法を紹介します。

※必要なデータが取得できるのであれば、dataLayerを使った方法以外でも問題ありません。

次の3つのタグの設定方法を紹介します。

実際に設置すべきタグは、プロジェクト毎に異なります。
タグの発火タイミングを柔軟に制御するため、GTMのdataLayerとカスタムイベントトリガーの利用を前提に紹介します。

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

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

  1. [Webページ] ページビュー時に「GTMのスニペットタグ」が読み込まれる
  2. [GTM] GTMのスニペットタグによって発火したトリガーイベント（イベントタイプはページビュー）に紐付いた「KARTEの計測タグ（viewイベント）」が実行される
  3. [KARTE] viewイベントを受け取る
  4. [Webページ] 「GTMのdataLayer」にGTMカスタムイベントと変数「user_id」をpushする
  5. [GTM] 「GTMカスタムイベント」に紐付けられた「KARTEのユーザータグ」が発火する
    このとき、GTMのdataLayerで受け取った変数「user_id」をタグに埋め込む
  6. [KARTE] 個人情報（identify）イベントを受け取る
    このとき、ユーザータグに埋め込まれた変数「user_id」を受け取る
KARTEに連携したい情報がそもそもWebページ上に出力されていない場合は、Webサイト側の改修が必要になります

GTMによって「計測タグ」を発火させる場合

計測タグの仕様については 計測タグの設置 をご参照ください。

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

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

  3. 「HTML」入力欄に「KARTEの計測タグ」を記述
    ご自身のKARTEプロジェクトの計測タグの取得方法については サイトに直接計測タグを設置する > 設置手順 をご参照ください。
    null

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

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

GTMによって「ユーザータグ」を発火させる場合

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

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

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

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

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

    1. メニューの「変数」から「ユーザー定義変数」の「追加」をクリック
      null
    2. 変数名を指定
    3. 変数タイプ「ページ変数」から「データレイヤーの変数」を選択
      null
    4. データレイヤーの変数名に「2で設定した各種key」を記述し「保存」をクリック
      null

  4. トリガーの作成

    1. メニューの「トリガー」から「新規」をクリック
      null
    2. トリガーのタイプ「ページビュー」から「ページビュー」を選択
      変数の参照がページビューの段階では出来ない場合は、適宜変更してください。
      null
    3. トリガーの発生場所「一部のページビュー」を選択
    4. 「Page URL」「含む」「DataLayer変数が発生しているページのURL」を設定し「保存」をクリック
      null

  5. タグの設定

    1. 「タグタイプを選択」より「カスタムHTMLタグ」を選択
    2. 「タグを設定」の「HTML」入力欄に「ユーザータグ」を記述
タグ中の変数名は、GTM側で設定した変数名と合わせてください。
  • KARTEのタグv1の場合
<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>
  • KARTEのタグv2の場合
<script type="text/javascript">
try {
    krt("send", "identify", {
        user_id: "{{ユーザーID}}",
        name: "{{氏名}}",
        email: "{{メールアドレス}}"
    });
} catch(e) {
    if('krt' in window) {
        krt('send', '_error', {
            message: e.message
        });
    }
}
</script>
  1. 「詳細設定」をクリックし、「タグ配信の優先度」に「0」を設定
  2. 「配信するタイミング」に4で作成したトリガーを指定

GTMによって「購入（buy）イベントタグ」を発火させる場合

KARTEへ送信する購買情報をGTMを利用しKARTEへ送信する方法についてご説明します。
購入（buy）イベントタグの詳細については 購入（buy）イベントタグの設置 をご参照ください。

同じ変数名を使ってGTMへ送信するとその変数は上書きされます。
上書きされて困る情報は別の変数名を使用してください。

例: 購入時にカートを空にしたい場合、連続して発火させるbuyイベントとカートイベントでどちらも同じ変数名でデータを送信するとGTM上でデータが上書きされます

  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,
 bought_items: items
});
</script>

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

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

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

タグ中の変数名は、GTM側で設定した変数名と合わせてください。
  • KARTEのタグv1の場合
<script type="text/javascript">
try　{
    tracker.buy({
        transaction_id: {{transaction_id}},
        revenue: {{revenue}},
        items: {{bought_items}}
    });
} catch(e) {
    if('tracker' in window){
        tracker.track('_error', {
            message: e.message
        });
    }
}
</script>
  • KARTEのタグv2の場合
KARTEのタグv2は、現在一部のプロジェクトに限定して先行提供しています。
特別な案内があった場合を除いて、タグv2ではなく従来の計測タグやカスタムイベントタグ（v1）を導入してください。
https://support.karte.io/post/7E5yZwHWroaDTDmd4f0SDx
<script type="text/javascript">
try　{
    krt('send', 'buy', {
        transaction_id: {{transaction_id}},
        revenue: {{revenue}},
        items: {{bought_items}}
    });
} catch(e) {
    if('krt' in window){
        krt('send', '_error', {
            message: e.message
        });
    }
}
</script>

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

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

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

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

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

補足

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