Webサイトの分析をする際、PV数といった一般的な指標は Google Analytics で取得することができますが、今回は独自の指標を取得したかったので Google Tag Manager を使って独自で実装した javaScript をWebサイトで動かし、指標を Google Analytics に飛ばして確認できるようにしました。この記事ではその方法を書き残しておきます。
＊参考
- Google Tag Manager / 公式サイト
- GTMのユーザー定義変数の変数タイプ一覧と解説
- GoogleTagManagerのカスタムイベントを導入する方法
- カスタムJavascriptとカスタムHTMLの違い
＊Google Tag Manager（GTM） とは
Google から公開されているタグマネジメントツールのことで、Webサイトに埋め込むHTMLタグを一元管理するツールです。
タグの一元管理するツールは他にも Yahooタグマネージャーなどがありますが、GTM はGoogle Analytics など Google 系サービスと連携ができるので GTM を使いました。
＊GTMにログイン
Google Tag Manager にアクセスし、アカウントを作成します。
登録が終わるとHTMLに埋め込むためのコードが表示されるので、そのコードを対象Webサイトの指定位置に追加します。
私は試しに自分のブログサイトに GTM を導入してみたのですが、 Blogger の場合は GTM で表示されているコードをそのまま追加するとエラーになるため、下記サイトを参考にして一部の文字を書き換える必要がありました。
＊カスタムタグの追加
指標を取得するための javaScript を実装します。このためには、カスタム HTML タグで javaScript を実装し、その実装で dataLayer 変数に値を登録することで独自の指標を Google Analytics に送れるようになります。dataLayer 変数とは GTM に渡したい情報を格納するオブジェクトのことです。
GTM管理画面の左側に表示されているタグを選択 → 新規作成 → タグの設定「カスタムHTML」を選択してタグを作成します。
タグの設定で HTML の項目に javaScript を実装します。今回はページスクロールが止まったときの指定要素の座標値を dataLayer 変数に登録する実装をしました。dataLayer 変数にはdataLayer.push({'event': 'データレイヤー変数名', '変数名':' 渡したい値'});で値を格納することができます。
<script>
var timeoutId;
window.addEventListener("scroll", function () {
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
var target = document.getElementById('Header1').getBoundingClientRect()
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'stopScroll',
'scrollValue': JSON.stringify(target)
})
}, 1000);
});
</script>
タグ設定画面で配信順序なども設定することができますが今回は設定せず、最後のトリガーだけ設定します。
トリガーは上記で実装したコードを実装するタイミングの設定です。今回は既存で存在している「All Pages(ページビュー)」のトリガーを設定しておきます。
＊dataLayer 変数の作成
タグ作成時に実装した dataLayer 変数はそのままだと使えないので、変数を登録する必要があります。
管理画面の左にあるメニューから「変数」を選択 → ユーザー定義変数を新規作成 → 変数の設定で「データレイヤー変数」を選択して、変数名は「scrollValue」にします。バージョンや値の形式などの設定もできますが、今回はデフォルトのままで問題ないです。
＊トリガーの作成
タグ作成時に実装した dataLayer 変数の event 名をトリガーとして作成する必要があります。
管理画面の左にあるメニューから「トリガー」を選択 → 新規作成 → トリガーの設定で「カスタムイベント」を選択して、変数名は「stopScroll」にします。
＊Google Analytics との連携設定
このままだと Google Analytics に指標が送られないため、新しくタグと変数を作成する必要があります。
Googleアナリティクス用の変数を新規作成します。
変数の新規作成 → 変数の設定で「Googleアナリティクス設定」を選択して、変数名とトラッキンングIDを設定します。トラッキングIDは Google Analytics の管理画面から確認することができます。
- 変数名 ----- stopEvent
- トラッキンングID ----- 対象サイトのトラッキングID
Googleアナリティクスに連携するためのタグを新規作成します。
タグの新規作成 → タグの設定で「Google アナリティクス: ユニバーサルアナリティクス」を選択します。
トラッキングタイプはイベントを設定し、カテゴリ名は任意の名前、その他の項目は連携したい値を設定します。今回は dataLayer 変数として登録した「scrollValue」の値を連携したいので{{ scrollValue }}を設定します。
- トラッキングタイプ ----- イベント
- カテゴリ -------- Google Analytics に連携したいカテゴリ名
- アクション -----
{{ scrollValue }} - ラベル ----------
{{ scrollValue }} - 値 ----------------
{{ scrollValue }}
トリガーは前手順で作成したカスタムイベントの「stopScroll」を設定します。
＊動作確認
一通り設定が完了したので、正常に動作しているか動作確認してみます。
GTMのプレビュー機能を使うことで、公開前の動作確認をすることができます。プレビューを見ることができるのは自分のブラウザのみで、dataLayer 変数なども確認することができます。
管理画面の右上にある「プレビュー」のボタンをクリックします。プレビューモードになったことを確認後、対象のWebサイトに移動すると画面下部にプレビューが表示されます。
スクロールしてみて、今回追加したイベントが発火されていて、dataLayer 変数に値が登録されていることを確認できます。
Google Analytics への連携確認は、Google Analytics 管理画面のリアルタイム → イベント のページから確認することができます。
＊補足：カスタムJavascriptとカスタムHTML
-
カスタムJavaScript
ページ変数の一種
変数が使用されるたびにJavaScript関数が実行され、その戻り値が使用される。 -
カスタムHTML
タグの一種で script タグを使って javaScript を実装できる。
「変数」は主にその戻り値を利用する、計算した結果の数値のみを他のタグやトリガーに利用したい場合に使う。
「タグ」はページに反映する、ページに対して変更を加えたり、特定のページにリクエストを送信したい場合に使う。
変数はトリガーやタグから参照されるたびに計算される。評価結果の保存は原則なされないため、一つのイベントに対して複数回計算が行われる可能性がある。
タグはトリガーが有効になったタイミングでのみ計算される。
＊所感
初めて GTM を使いましたが、javaScript を使ったカスタマイズが簡単にできるので、少し手の凝った分析もできそうです。javaScript エラー時のイベントを Google Analytics に飛ばすなど今回使った以外にも機能が豊富なので、調べて使いこなしていきたいです。
Sign up here with your email
ConversionConversion EmoticonEmoticon