Google Tag Manager(GTM)を利用して、スクロール量を計測

Google Analyticsでは残念ながらスクロール量の計測が苦手である。

そこで、スクロール量が数字化して見えるように、GTM(Googleタグマネージャー)を使い実装していく。

目次

スクロール量の計測に必要なタグ・トリガー

必要なものは、タグ2種類、トリガー1種類。

スクロール量計測に必要な タグ

任意になるが、今回は以下のように設定。

  1. Scroll_depth
  2. GA_Scroll_Depth

4種類のデータレイヤー

  • Event Category = {{eventCategory}}
  • Event Action = {{eventAction}}
  • Event Label = {{eventLabel}}
  • Event Value = {{eventValue}}

スクロール量計測に必要な トリガー

任意になるが、今回は以下のように設定。

  1. Event equals ScrollDistance

まずは、タグ(Scroll_depth) から作成

新規タグを作成し、以下のように実装。

タグを作成し、プラグインを実装する。

①タグ名 任意 ここでは「Scroll_depth」

②カスタムHTMLを選択

③Scrooll Depthファイルを実装

https://scrolldepth.parsnip.io/ へアクセスし、Scroll Depthファイル をダウンロードし、実装。カスタムHTMLにコピー&ペースト。※scriptのタグで囲ってください。

<script>

ここにjquery.scrolldepth.js を貼り付ける

</script>

上記に加え、以下のコードを実装します。

<script>
jQuery.scrollDepth({
  percentage: true,
  userTiming: false,
  pixelDepth: false
});
</script>

 

 

④配信タイミングは計測したいページを指定 もちろん、すべてのページでもよい

一応推奨では、DOM READY後の配信となっています。DOM.READYの作成方法は以下のとおりです。

トリガー > 新規 > ページビューのDOM Ready

データレイヤーの作成

データレイヤーの作成

 

変数 > 新規作成 >  データレイヤーの変数 を選択。

上記の画像のように、以下のデータレイヤーを作成します。

eventCategory
eventAction
eventLabel
eventValue

トリガー(Event equals ScrollDistance)の作成

新規トリガーを作成で以下のように実装。

トリガー(Event equals ScrollDistance)の作成

 

 

①トリガー名 Event equals ScrollDistance

②カスタムイベントを選択

③イベント名 ScrollDistance

 

タグ(GA_Scroll_Depth)を作成

新規タグを作成をクリックし、以下のように実装。

タグ(GA_Scroll_Depth)を作成

①アナリティクスを選択

②ユニバーサル アナリティクスを選択

③各項目を下記のように記載

カテゴリ {{eventCategory}}
アクション {{eventAction}}
ラベル {{eventLabel}}
{{eventValue}}

非インタラクション偽でも真でもよい。偽にした場合、通常は直帰扱いになる場合でも直帰にならない。

④配信タイミング Event equals ScrollDistance

先ほど作成した Event equals ScrollDistance を選択。

Google Analiticsで以下のように表示される

す。「Baseline」、「25%」、「50%」、「75%」、「100%」の5種類のイベントが発生。

11220回の来訪で、一番したまでスクロールしたのは 888回ということになる。

jquery-scrolldepthのバージョンUPに伴い、バージョン0.9 (11/19/2015)から、「Baseline」イベントは削除されました。そのため最新のjquery-scrolldepthでは上記のように「Baseline」の表示がされません。

「Baseline」を表示させたい場合は、バージョン0.8以下を利用する必要があります。過去のバージョン、以下のGithubから入手可能です。

GitHub
Releases · robflaherty/scroll-depth Google Analytics plugin to track visitor scroll depth - robflaherty/scroll-depth

設定周りで悩んだら、お気軽にご相談ください。
問合せの際は「web担当者を見た」とお伝えください。

この記事を書いた人

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

コメント

コメントする

CAPTCHA


目次