Webサイトの運営者は常に「サイトの売り上げを最大化したい」と考えているはずです。
そこで、サイトに訪れてくれたユーザーの動きを把握することがとても重要になります。
ユーザーがどの訴求に心を動かされて、どのボタンをクリックしてコンバージョンまで繋がるのかなどの数値を追い続ける必要があります。
しかし、GTM既存の機能だけでは細かい測定をすることができません。
そんな時に利用するのがカスタムイベントです。JavaScriptを用いて様々なデータを集計することができます。JavaScriptが使える人なら簡単にカスタムイベントを実装できるので是非最後までご覧ください。
なお測定には以下の2つのツールを利用します。
- Googleアナリティクス （GA4）
- Google Tag Manager（GTM）
- GTMとGoogleアナリティクスを用いたスクロール量の測定方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
カスタムイベントとは
カスタムイベントとは、GTMに備わっているトリガータイプの一つです。
トリガータイプにはページビューや、スクロール距離などの基本動作項目が大半を占めています。
基本動作ではトリガーを実装できない時にカスタムイベントを用いてオリジナルのトリガーを作成します。
トリガーの作成はJavaScriptを用いて実装することができます。
JavaScriptの実装
JavaScriptを用いてトリガーの発火タイミングを作成します。
dataLayer.pushメソッドを使うことにより、GTMにデータを渡すことができます。
イベントを実行するためには下記のような実装をします。
dataLayer.push({'event': '〇〇イベント名を入力'});今回の例ではブラウザがChromeの場合にカスタムイベントを実行するプログラムにします。
イベント名はview-chromeとします。
const userAgent = window.navigator.userAgent.toLowerCase();
// Chromeを使っている場合
if(userAgent.indexOf('chrome') != -1) {
// GTMにデータを渡す
dataLayer.push({'event': 'view-chrome'});
}JavaScript側の設定はこれで終了です。
トリガーの設定
次にトリガーの設定をおこないます。トリガーではイベントの測定タイミングを指定するのが一般的ですが、カスタムイベントの場合はJavaScript側で発火のタイミングを指定してます。
そのため、GTMのトリガー設定ではJavaScript側からデータを受け取れる設定を行います。
トリガーを追加
GTMでトリガー > 新規
トリガーの詳細 > カスタムイベント
イベント名 > view-chromeを入力
最後に名前をつけて保存します。
今回はChromeビュートリガーと名前をつけて保存します。
タグの設定
先ほど設定したトリガーが発火したことをGoogleアナリティクスに伝える設定を行います。
GTMで タグ > 新規をクリックします。
タグとトリガーを紐づける
トリガーが発火した際にデータを伝える設定をするため、トリガーを紐づける必要があります。
トリガーをクリック
先ほど設定したChromeビュートリガーをクリック
データをGoogleアナリティクスへ送信する
紐づけたトリガーが発火したタイミングでGoogle アナリティクスへデータを送信する設定を追加します。
タグの設定
Google アナリティクス: GA4イベント
設定タグをの値を「Google アナリティクスGA4設定」に、イベント名を任意の値に設定します。
イベント名はアナリティクス側でどのイベントが発生したのかを確認するための名前になります。
イベントの名前がわかる値にしましょう。
今回はchrome-viewと設定します。
設定が完了したら任意の名前をつけて保存します。
設定をプレビューで確認する
設定はここまでで終了です。
今設定した内容が正しく測定できるか確認しましょう。
GTMのプレビュー機能を用いて確認します。
画面右上のプレビューをクリック
Googleアナリティクスの測定ができるURLを入力
画面右下Finishをクリック。
*広告などを非表示にすることができるブラウザ「Brave」を利用している方は表示されないためChromeなどのブラウザでテストしましょう。
発火したトリガーは下記画像赤枠内「Tags Fired」欄に表示されます。
発火していないトリガーは下記画像黄色枠内「Tags Not Fired」欄に表示されます。
今回は50%scrollタグのトリガーであるボタンをクリックしていないため、Tags Not Fired欄に表示されています。
この記事では省略しますが、実際にタグを発火させた場合はTags Fired欄に表示されることを確認しましょう。
設定した内容を公開する
ここまででタグの実装とテストが完了しました。
しかし、この状態ではまだ、アナリティクスで確認することはできません。
最後に設定した内容を「公開」して初めて一般ユーザーの測定できるようになります。
画面右上公開ボタンをクリックします。
公開する際はどのような編集をしたのかメモに残しておきましょう。
Google アナリティクスで確認する
設定したタグはGoogle アナリティクスのイベントから確認することができます。
タグの設定で設定したイベント名がアナリティクス上で表示されます。
リアルタイムで数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
過去の数値を確認する場合
設定したタグを今すぐ確認したい場合はリアルタイム > イベントから確認することができます。
まとめ
GTMでカスタムイベントを測定しGoogleアナリティクスへ反映させる方法を理解することはできたでしょうか？
GTMのカスタム利用するとスクロールイベントやクリックイベントだけでなくほとんどの動作を簡単に測定することができるようになります。
GTMでスクロールイベントを測定しGoogleアナリティクスへ反映させる方法まとめ
- トリガーの発火タイミングはJavaScriptで実装する
- GTMでトリガーとタグを設定する
- 公開する前にプレビューでテストをする
- タグの設定の際に入力したイベント名がアナリティクスで反映される
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
