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

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

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

ピックアップ記事

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

関連記事

  1. Google Tag Manager

    サーバーサイドGTM: ウェブコンテナを使って1stパーティドメインからgtm.jsを配信してみた

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

  2. Adobe Analytics

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

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

  3. GA 360 Suite

    Google Analytics 4:client_idを取得

    こんにちは。エクスチュアのsaraです。2023年7月、ユニ…

  4. Google Tag Manager

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

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

  5. Google Tag Manager

    GTMで任意のリンクをクリックしてn秒後トリガーを動作させる方法

    こんにちは、エクスチュアの岩川です。GTMで用意され…

最近の記事

  1. LangChainって何?: 次世代AIアプリケーション構築…
  2. 回帰分析はかく語りき Part1 単回帰分析
  3. GitHub ActionsでGCEへのデプロイを楽にしてみ…
  4. Snowflake の Copilot が優秀すぎる件につい…
  5. Snowflake の新しいData Clean Roomの…
  1. Adobe Experience Cloud

    Adobe Summit 2020レポート: Welcome
  2. IT用語集

    ハードウェア(Hardware)、ソフトウェア(Software)って何?
  3. Adobe Experience Cloud

    Adobe Summit 2020レポート: 5 Marketing Trend…
  4. Tableau

    TableauでTreasure Data上のデータへ接続する方法(2023/0…
  5. Mouseflow

    Mouseflowを採用するWebサイトが10万を突破!
PAGE TOP