Scroll Depth, Google Tag Manager を使ったページスクロール計測

前回、次のような記事を掲載しました。

アナリティクス 直帰時のページ滞在時間を知る


今回は、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 をプレビューすると、

scroll-depth-datalayer

上のように、Data Layer Value が表示されており、どの data layer 変数に、どんな値が、代入されているのかがわかります。

注:わざわざ、確認しなくても、scrolldepth.parsnip.io の一番下に説明されていますが、一応確認してみました。

次に、カスタム定義変数(下図の下4つの変数)を設定し、再度、プレビューすると、

scroll-depth-variable

変数(Variable)に、Data Layer Value が、受け渡されていているのが確認できます。

変数名(Variable)は、Data Layer 名の最初に、SDをつけて設定しています。

ちなみに、上の図の、変数 event は、カスタム定義変数ではなく、組み込み変数(カスタムイベント)ですので、組み込み変数設定で event にチェックすると使用可能となります。

最後に、トリガー と タグ を設定します。

トリガー画面でのイベント名に、上記変数 Event の値をそのまま記載することにより、トリガー時に、アナリティクスに、値の受け渡しが可能となります。

今回は、ScrollTiming のみ掲載しています。

プレビュー画面 タグのタブで Scroll Depth タグが、正しく Fire されていることを確認(下)したら、後は、Google Analytics 「行動」→「イベント」で、データが正しく反映されているかを確認。

scroll-depth-tag


追記:

今まで、”jquery.scrolldepth.min.js” を、webサイトがあるサーバー上においていたのですが、Google Tag Manager の、カスタム HTML タイプのタグを利用すると、一切、web サーバー内を変更する必要がないことがわかりましたので、そのように変更しました。

custom HTML タイプタグ内に、Scroll Depth のスクリプトと、オプション設定などのスクリプトを記載します。

一つ気をつけないといけないのが、トリガーのタイミングということで、DOM Ready で設定したほうがよいとのことでした。参照サイト


Google Tag Manager 上での設定は、Marineroad さん のサイトがわかりやすいので、コチラをご参考にされるのが良いか、と思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です