見出し画像

サイト改修を行わずにGoogleTagManagerのカスタムイベントを導入する方法

and_a


最近では、GoogleTagManager(以下、GTM)を利用しGoogleAnalyticsを導入したり、効果測定のためのタグを導入したりなどは一般的になったかと思います。ですが、GTMから提供されている機能内では要望を満たせないケースも同時に増えてきていると思います。

例えば、
・URLが変わらないフォームのトラッキング
・成果測定の際に注文IDが必要となる
・ページ遷移の際に再ロードがされないサイト(Pjax)
・シングルページアプリケーション(SPA)
・独自のイベントをコンバージョンとしたい(サイト内で特定の行動をとった場合、など)

など、よく見かけるケースかと思います。

このような場合に「カスタムイベント」を利用することで、「何か値を伴った、独自のトリガーを作成することが可能」となるため、それを利用して上記のような場合にも対応ができるようになります。

ただ、便利なカスタムイベントですが、実装に手間のかかるケースがあります。
大抵のケースでは、実装の際はサイト製作者へと改修の依頼をするかと思いますが、

・どのように指示を行えばいいかわからない
・一連のやりとりに時間がかかる
・よく理解してもらえない
・リソース不足

など、実装が一筋縄では行かない場合があります。

そこで、GTMより提供されている「カスタムHTML」を利用し、サイト製作者に依頼を行うことなく、自分で実装をスピーディーに行ってしまおうというのがこの記事の趣旨です。

前提条件

・サイトにGTMがすでに導入されていること
・GTMの基本的な知識

こちらに関しては、優良な記事が多数ネット上にありますので割愛とします。
また、Javascriptを利用する部分があります。ここに関しては近くのエンジニアさん、もしくはand,aへの依頼をいただけると嬉しいです。


はじめに

今回は、
・1ページごとに設問が１つあり、答えていくごとに次のページに遷移する。
・ページのURLが変わらないためどのページでも同じURLがAnalyticsに送信されてしまう。
というケースで説明を行います。

基本的には、以下のステップが必要です。

1. フォームの構造を確認しながらカスタムHTMLを作成する
2. 対象のページの「DomReady」トリガーで、上のカスタムHTMLを発火させる設定をする
3. カスタムHTMLで発火したイベントをトリガーとして扱う設定をする
4. そのトリガーで発火させたいタグを準備し、トリガーに紐付ける


1. カスタムHTMLを作成する

<script>
(function(){
   window.dataLayer.push({
     'event': 'form-pageview',
     'form-title': document.querySelector('h2.form-title').innerText,
   })
})()
</script>

このタグが発火された時、「form-pageview」という名前のイベントがGTMに送信されます。
また、ページ内の特定のテキストを取得し「form-title」という名前で、上記イベントに紐づいた形で値がGTMに送信されています。
この値を、GTM側でGoogleAnalyticsのタグに追加してあげて「仮想ページビュー」として発火させるようになります。

document.querySelector('h2.form-title').innerTextの部分に関しては「サイトの中から設定したCSSセレクタに当てはまる特定の要素(タグ)を取得し、要素のテキストをさらに取得する」というJavascriptプログラムです。
各ページで異なる値が取れるように、フォームの構造を確認しながら調整を行う必要があります。


2. 対象のページでカスタムHTMLが発火するように設定する

続いて、GTMで上記のカスタムHTMLをタグとして登録し、対象のページで発火するように調整します。

➀新規タグの追加で「カスタムHTML」を選択

②HTML追加欄に上で作成したHTMLを追加する

③トリガーを対象ページのURLで設定し、発火のタイミングを「DomReady」としておく

これでフォームページを読みこむ毎にページ内のテキストを取得し、取得したテキストをform-pageviewイベントでGTMに送信することが可能となりました。

画像1


3. カスタムイベントをGTMに登録

ただ、現時点ではカスタムイベントはGTMでは受け入れてくれません。
そのため、カスタムイベントの受け入れをしてくれるようにGTMで登録作業を行う必要があります。

➀「変数」> 「組み込み変数」を確認し、「Event」という変数がなければ「設定」ボタンから追加する
(これでカスタムイベントを有効化できます)

②「変数」 > 「ユーザー定義変数」から「新規」ボタンをクリックし、「変数の設定」 > 「データレイヤーの変数」を選択する

画像2


③「データレイヤーの変数名」に取得した値をさす名前（今回の場合だとform-title）を設定する

画像3

これで、カスタムイベントが発火した際に合わせて値を取得することが可能となりました。

4. 独自のトリガーを利用してタグを発火させる

そして最後に、カスタムイベントをトリガーとして登録を行います。

➀「トリガー」 > 「新規」ボタンをクリックして「トリガーの設定」 > 「カスタムイベント」を選択

画像4


②「イベント名」にdataLayerで設定したカスタムイベントの名前を追加して保存する
（さらに「一部のカスタムイベント」などで条件を設定することも可能です）

画像5

これで全ての設定は完了です。


さいごに

GTMで設定できることが増えると、サイト内でのユーザーの行動が見えやすくなります。
KPIの設定を見直し、必要なイベントを設定できるようになりましょう。

Twitterもやってます。
フォローもよろしくお願いします。


------------------------------------
GTM活用など、ご相談はサイトよりお願いします。
▼お問い合わせ
and,a（https://and-aaa.com/）
------------------------------------

いいなと思ったら応援しよう！