KARTE Blocksで設定した内容が表示されたか、クリックされたかをGoogleアナリティクスでも計測したいというケースもあると思います。

本記事ではKARTE Blocksで設定した内容の表示・クリックをGoogleアナリティクスのイベントとして計測をする例を説明します。

下記を参考に、サイトごとに取得すべき内容に合わせて設定をお願いします。

前提

  • Googleタグマネージャーを用いてGoogleアナリティクスを設定しているサイトであること
    GTMの利用方法については Google タグマネージャ ヘルプサイト をご参照ください
  • GTMのカスタムイベントトリガーを利用すること
    詳細は Google タグマネージャ ヘルプサイト - カスタムイベントトリガー をご参照ください
  • Googleアナリティクスがユニバーサルアナリティクスであること
    GA4をご利用の場合は、本記事の内容を参考にGA4に合わせた設定をお願いします
  • KARTE Blocksで設定をするブロックタイプが「コード」「前にコードを追加」「後ろにコードを追加」であること

KARTE Blocksの設定

各置き換えブロックごとに、KARTE Blocksで設定をした内容が表示・クリックされたという情報をGTMのdataLayerにセットするための記述をします。

注意点

  • 表示・クリックともに、送信する内容は適宜変更してください
    以下、推奨設定になります。
    • blocks_event_action ： 対象ページとエリアがわかる値を設定
      • 例：top_mainbanner
    • blocks_event_label ： 配信条件とパターンがわかる値を設定
      • 例：firstvisit_patternA
  • ABテスト等で複数パターンを設定している場合は、パターンごとにコードを記述してください

表示の計測（サンプル）

置き換えブロックのScriptに、GTMのdataLayerに情報をセットする記述を追加してください。

window.dataLayer = window.dataLayer || [];

dataLayer.push({
    event: "blocks_event",
    blocks_event_category: "blocks_view",
    blocks_event_action: "top_mainbanner",
    blocks_event_label: "firstvisit_patternA"
});

クリックの計測（サンプル）

置き換えブロックがクリックされた際にGTMのdatalayerに値がセットされるようにコードを記述してください（onclick属性への記述など）。

window.dataLayer = window.dataLayer || [];

document.getElementById("text-button").onclick = function() {
  dataLayer.push({
      event: "blocks_event",
      blocks_event_category: "blocks_click",
      blocks_event_action: "top_mainbanner",
      blocks_event_label: "firstvisit_patternA"
  });
};

GTMの設定

変数・トリガー・イベントの順に、それぞれ設定が必要です。

変数設定

作成する変数は合計で3つです。

変数「blocks_event_category」を作成する方法を下記に記載しておりますので、同様の手順で変数「blocks_event_action」「blocks_event_label」も作成してください。

  1. メニューの「変数」から「ユーザー定義変数」の「新規」をクリックKARTE Blocks 変数の新規追加
  2. 変数名に「blocks_event_category」を記述
  3. 変数タイプを選択にて、「ページ変数」の「データレイヤーの変数」を選択KARTE Blocks 変数タイプの選択
  4. データレイヤーの変数名に「blocks_event_category」を記述
    null
  5. 「保存」をクリック

トリガー設定

  1. メニューの「トリガー」から「新規」をクリックKARTE Blocks トリガーの新規追加
  2. トリガー名に「blocks_event」を記述
  3. トリガーのタイプを選択にて、「その他」の「カスタムイベント」を選択KARTE Blocks トリガータイプを選択
  4. イベント名に「blocks_event」を記述
    null

タグ設定

  1. メニューの「タグ」から「新規」をクリック
  2. タグ名を設定（例：KARTE Blocksイベント計測用）
  3. タグタイプを選択にて、「Googleアナリティクス：ユニーバサルアナリティクス」を選択KARTE Blocks タグタイプの選択
  4. トラッキングタイプ「イベント」を選択
    null
  5. イベントトラッキンパラメータのカテゴリ・アクション・ラベルに、作成した変数をGTMの参照方法に則って記述
    null
  6. Googleアナリティクス設定で、計測をしたいGAトラッキングIDを設定
  7. 非インタラクションヒットの値を「真」に設定
    ※ 値を「偽」に設定すると、Googleアナリティクスで直帰率が正しく計測できなくなるため。
  8. トリガーの選択にて、作成をしたトリガー「blocks_event」を選択KARTE Blocks タグ設定でトリガーを指定

Googleアナリティクスで計測確認

Googleアナリティクス画面にて、設定をしたイベントの発生が確認できたら完了です。
KARTE Blocks GA画面でのイベント計測確認

#karte_blocks