前回、次のような記事を掲載しました。
アナリティクス 直帰時のページ滞在時間を知る
今回は、Scroll Depth 導入方法ではなく、どのように、Google Tag Manager 上で、データが受け渡されるのか?をまとめてみました。
例えば、閲覧者が、計測するページの25%までスクロールさせた時、Scroll Depth の Java Script、Google Tag Manager はどのように動作しているのでしょうか?
<script src="jquery.scrolldepth.min.js"></script> <script> jQuery(function() { jQuery.scrollDepth(); }); </script>
まず、Scroll Depth プラグイン(ワードプレスのプラグインではありません)をインストール、上記 script を、該当するページ内に記述し、Google Tag Manager をプレビューすると、
上のように、Data Layer Value が表示されており、どの data layer 変数に、どんな値が、代入されているのかがわかります。
注:わざわざ、確認しなくても、scrolldepth.parsnip.io の一番下に説明されていますが、一応確認してみました。
次に、カスタム定義変数(下図の下4つの変数)を設定し、再度、プレビューすると、
変数(Variable)に、Data Layer Value が、受け渡されていているのが確認できます。
変数名(Variable)は、Data Layer 名の最初に、SDをつけて設定しています。
ちなみに、上の図の、変数 event は、カスタム定義変数ではなく、組み込み変数(カスタムイベント)ですので、組み込み変数設定で event にチェックすると使用可能となります。
最後に、トリガー と タグ を設定します。
トリガー画面でのイベント名に、上記変数 Event の値をそのまま記載することにより、トリガー時に、アナリティクスに、値の受け渡しが可能となります。
今回は、ScrollTiming のみ掲載しています。
プレビュー画面 タグのタブで Scroll Depth タグが、正しく Fire されていることを確認(下)したら、後は、Google Analytics 「行動」→「イベント」で、データが正しく反映されているかを確認。
追記:
今まで、”jquery.scrolldepth.min.js” を、webサイトがあるサーバー上においていたのですが、Google Tag Manager の、カスタム HTML タイプのタグを利用すると、一切、web サーバー内を変更する必要がないことがわかりましたので、そのように変更しました。
custom HTML タイプタグ内に、Scroll Depth のスクリプトと、オプション設定などのスクリプトを記載します。
一つ気をつけないといけないのが、トリガーのタイミングということで、DOM Ready で設定したほうがよいとのことでした。参照サイト
Google Tag Manager 上での設定は、Marineroad さん のサイトがわかりやすいので、コチラをご参考にされるのが良いか、と思います。