ご注意ください

この記事は、リニューアル後のKARTE Blocksに関する内容です。 現在ご利用のUIが旧バージョンの場合は、リニューアル前のサポート記事をご確認ください。

KARTE Blocksによるブロックの配信やクリックなどのカスタムイベントをGoogleアナリティクス4（GA4）でも計測することが可能です。
これらのカスタムイベントを計測することで、ユーザーディメンションの作成やカスタムレポートなど活用することができます。

本記事では、Googleタグマネージャー（GTM)、およびデータレイヤー変数を利用して、KARTE Blocks関連のイベントをGA4で計測するための設定方法を説明します。

前提

• GA4を利用している

• GTMを用いてGA4を設定しているサイトである

  • GTMの利用方法について： Google タグマネージャ ヘルプサイト

• GTMのカスタムイベントトリガーを活用する

  • 詳細： Google タグマネージャ ヘルプサイト - カスタムイベントトリガー

設定の流れ

1. KARTE Blocks：変更したブロックに、GTMのデータレイヤー変数にイベント情報をセットするスクリプトを記述します。

2. GTM：データレイヤー変数を登録して［変数］を設定します。

3. GTM：カスタムイベントを計測するための、［トリガー］を設定します。

4. GTM：［タグ］を設定し、GA4にイベントを送信します。

5. GA4：データの計測を確認します。

1. KARTE Blocks：スクリプトの記述

変更したブロックに、GTMのデータレイヤー変数にイベント情報をセットするスクリプトを記述します。以下の2つのケースを例にコードを紹介します。

a.任意の施策・パターンが適用されたことを検知したい
b.ブロックがクリックされたことを検知したい

サンプルコード内の情報

各サンプルコードで記載している情報は、以下の通りです。目的に応じて適宜変更します。

補足

A/Bテストなどで複数パターンを設定している場合は、パターンごとにコードを記述してください

Scriptをブロックに記述する

ブロックの編集状態において、右側の編集パネルの［コード］タブをクリックし、［SCRIPT］タブを開いて記述してください。

a. 任意の施策・パターンが適用されたことを検知したい

変更したブロックのScriptに、GTMのデータレイヤー変数に情報をセットする記述を追加します。
なお、各キーに対する値は任意の内容で設定してください。

ご注意ください

どの施策・パターンが適用されたかを検知するためのコードです。 変更したブロックが実際に画面上に表示されたかを判別したい場合は、別途コードを記述してください。

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

dataLayer.push({
    event: "blocks_event",
    blocks_event_category: "blocks_message_open",
    blocks_campaign_name: "abtest_1", 
    blocks_pattern_name: "pattern_a"
});

b. ブロックがクリックされたときに検知したい

変更したブロックがクリックされた際にGTMのデータレイヤー変数に値がセットされるようにコードを記述します。
なお、各キーに対する値は任意の内容で設定してください。

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

document.querySelector("#hogehoge").addEventListener("click", function() {
  dataLayer.push({
      event: "blocks_event",
      blocks_event_category: "blocks_message_click",
      blocks_campaign_name: "abtest_1",
      blocks_pattern_name: "pattern_a",
      blocks_block_name: "top-carousel_first-banner"
  });
});

2. GTM：データレイヤー変数を設定

登録する変数

Scriptに記述した情報に対し、GTMで［変数］を登録・作成します。
上記のサンプルコードを利用する場合、設定する変数は以下の4つです。

• blocks_event_category

• blocks_campaign_name

• blocks_pattern_name

• blocks_block_name

ここでは、blocks_event_categoryの変数を例に、設定の流れを紹介します。
※ 同様の設定を他の変数についても行ってください。

変数の設定の流れ

1. メニューの［変数］から［ユーザー定義変数］の［新規］をクリック

2. 変数名にblocks_event_categoryを記述

3. 変数タイプを選択にて、「ページ変数」の「データレイヤーの変数」を選択

4. データレイヤーの変数名に`blocks_event_category`を記述  5. __［保存］__ボタンをクリック

3. GTM：トリガーの設定

1. メニューの［トリガー］から［新規］をクリック

2. トリガー名に`blocks_event`を記述 3. トリガーのタイプを選択にて、「その他」の「カスタムイベント」を選択 4. イベント名に`blocks_event`を記述 

4. GTM：タグの設定

1. メニューの［タグ］から［新規］をクリック

2. タグ名を設定（例：Blocksカスタムイベント送信(GA4)）

3. タグタイプを選択にて、「Googleアナリティクス： GA4イベント」を選択
   

4. 設定タグやイベント名（blocks_event)、イベントパラメータを設定
   

5. トリガーの選択にて、作成をしたトリガー「blocks_event」を選択

5. GA4：計測確認

GA4画面にて、設定をしたイベントの発生が確認できたら完了です。

補足

計測できているかすぐに確認したい場合は、GA4のリアルタイムレポートをご利用下さい。

送信したイベントをもとにカスタムディメンションを作成して、GA4のレポートで利用する

GA4のレポート画面では、イベントパラメータごとの数値はデフォルトでは確認できないため、レポートやデータ探索においてディメンションとして使用したい場合はカスタムディメンションに登録します。

カスタムディメンションへの登録はGA4管理画面の［設定 > データの表示 > カスタム定義 > カスタムディメンションを作成］で登録できます。

• ディメンション名： わかりやすい任意の文字列を入力します。

• イベントパラメータ： GTMで設定した「パラメータ名」と一致する文字列を入力します。