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

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

前提

GA4を利用している
GTMを用いてGA4を設定しているサイトである
- GTMの利用方法について： Google タグマネージャヘルプサイト
GTMのカスタムイベントトリガーを活用する
- 詳細： Google タグマネージャヘルプサイト - カスタムイベントトリガー

設定の流れ

KARTE Blocks：変更したブロックに、GTMのデータレイヤー変数にイベント情報をセットするスクリプトを記述します。
GTM：データレイヤー変数を登録して［変数］を設定します。
GTM：カスタムイベントを計測するための、［トリガー］を設定します。
GTM：［タグ］を設定し、GA4にイベントを送信します。
GA4：データの計測を確認します。

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

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

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

サンプルコード内の情報

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

補足

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

キー	値に記述する情報
event	イベント名サンプルコードでは、`blocks_event`で統一しています
blocks_event_category	イベントの種類
blocks_condition_name	配信条件名
blocks_pattern_name	（配信条件内の）パターン名
blocks_block_name	ブロックの名前

Scriptをブロックに記述する

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

a. 任意の配信条件・パターンが適用されたことを検知したい

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

ご注意ください

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

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

dataLayer.push({
    event: "blocks_event",
    blocks_event_category: "blocks_message_open",
    blocks_condition_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_condition_name: "abtest_1",
      blocks_pattern_name: "pattern_a",
      blocks_block_name: "top-carousel_first-banner"
  });
});