Google Analytics 4

【GA4/GTM】dataLayerを使ってカスタムイベントを発生させてみよう

はじめに

以前の記事でdataLayerを使用し、GTMとのデータの受け渡しを書きました。

まだ見てないよ〜という方は是非ご覧ください。

dataLayerは値を受け渡しするだけではなくGTMでのイベントを発生させることもできます。

イベント、というとGA4のイベントを想像しそうですがそうではありません。

サマリーに存在するトリガーのタイミングの一種だと思ってください。

サマリー?という方はこちらの記事をご参考ください。

GTMのイベントについて

まず、GTMの通常のイベントがどのようになっているか確認しましょう。

わかりやすいようにGTMでクリックトリガーを作成してみます。

するとサイト上でクリックする度にクリックイベントがサマリーに出てきます。

このようにGTMで用意されているトリガーのタイミングがあり、通常はそれを利用してトリガーを作成します。

しかしGTM側で用意されているタイミング以外で動作させたいタグがある場合に困ってしまいますよね。

そんなときにdataLayerを使用したカスタムイベント、つまりは「自分で任意のタイミング」を作成することができるのです。

では詳しい設定方法を解説していきます。

カスタムイベント設定

まず基本形は以下です

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({‘event’: ‘ イベント名 ‘});
</script>

※記事の仕様上、’(半角シングルクォーテーション)の文字が変わる可能性があります。
念の為シングルクォーテーションを打ち直していただけると幸いです

イベント名に記載したもの(今回は’TestEvent’とします)を確認してみましょう。

以下のサイト上でボタンを押した時にonclickでカスタムイベントのTestEventが発生するようにしました。

ではボタンを押してみます。

するとこのようにTestEventという欄がサマリーに出てきました。

これでTestEventをトリガーに使用する準備ができました。

ではトリガーを設定していきましょう。

※お気づきの方もいるかもしれませんが、Clickイベントでいいじゃん!というツッコミは無しでお願いします。あくまで一例ですので…笑

カスタムイベントにトリガーを設定する

このままではGTMのサマリーにトリガータイミングとして出ているだけで何も計測されていません。

これを利用したトリガーを作成してみましょう。

GTMの[トリガー]タブから[トリガーの設定]をクリックし、[カスタム イベント]を選択します。

[イベント名]に設定したカスタムイベント名(今回はTestEvent)を入れます。

これでトリガーの準備は完了です。

任意のタグにこのトリガー設定してみましょう。

そしてページ上のボタンをクリックすると…

任意のタグが任意のタイミングで発火するようになりました!


任意のタイミングでトリガーを発火させられるようになると一気に自由度が増しますよね。

カスタムイベントを使えばSPAなどの通常のページビューで取れない際もカスタムイベントを利用することで擬似的にページビュートリガーのように使うこともできたりします。

エクスチュアでは企業様の様々なお悩みに真摯に対応いたします。

是非お気軽にお問合せください。

KARTE を使ってサイト外でも接客を前のページ

Snowflake の新しいData Clean Roomの見どころを解説次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Adobe Analytics

    GTMのdataLayerをAdobeAnalyticsの「s」オブジェクトにコピーする

    こんにちは、エクスチュアの權泳東(コン・ヨンドン)です。Ado…

  2. Google Analytics

    【GA4】推奨イベント・カスタムイベントの設定方法

    こんにちは、エクスチュアの岩川です。以前GA4のイベ…

  3. Google Tag Manager

    【GA4/GTM】dataLayerを活用しよう

    はじめにこんにちは、エクスチュアの岩川です。GA4の…

  4. Google Analytics

    Google Analytics4 を知る。

    Google Analyticsを知る。 -エクスチュアのツール紹介-…

  5. Google Analytics

    【GA4】DebugViewの使い方

    こんにちは、エクスチュアの岩川です。GA4ではDebugVi…

カテゴリ
最近の記事
  1. Looker Studioで日付フィルターの開始日・終了日の…
  2. Streamlitでdbt-elementary風ダッシュボ…
  3. Adobe WebSDK FPIDでECIDの復元を検証
  4. dbt Projects on Snowflakeで作成した…
  5. Dataformでtype:’increment…
  1. Adobe Analytics

    Adobe Analytics:ワークスペース:セグメント比較機能の紹介
  2. データサイエンス

    回帰分析はかく語りき Part3 ロジスティック回帰
  3. ヒートマップ

    クリック・ヒートマップの使い方
  4. Adobe Analytics

    サイトセクションとは-Adobe Analyticsの指標説明
  5. Google Apps Script(GAS)

    GoogleスプレッドシートのデータをGASで整理する【setValue・set…
PAGE TOP