Googleタグマネージャ事例:GTMでスクロール読了率の計測と分析

スクロール読了率
Googleタグマネージャで見出しを検知して、スクロールした読了率を分析する方法を試しました。とりあえずタグ2つとトリガー1で実装できます。

こんにちは、Googleタグマネージャ大好きカグア!です。

見出しをjQueryで調べて、下からn番目のh2が見えたら、イベントを発火させる手法をご紹介します。

関連記事
>>Googleタグマネージャに予め設定しておくと便利な変数12本
>>Googleアナリティクスでスクロール計測でページ読了率のまとめ
>>Googleタグマネージャ基礎:クリック計測する設定<完全版>

GTMでスクロール計測とは

スクロール計測が注目されている

わたしが気づかなかっただけなのですが、スクロール計測についての記事が増えてきましたよね。

はてぶ検索でもだいぶ見るようになってきました。後述のリンクにめとめておきますね。

変数を作らない方法で計測

スクロール読了率計測の流れ

わたしも読了率については、いろいろいと試行錯誤をしました。ただどうも、コンバージョンとどう結びつけるか、スマホとは%が変わるよね、など、私には使い切れないでいました。

  • レスポンシブだとページ内の位置をが%で把握しにくい。
  • 内容で把握したい。
  • 管理を簡単にしたい。
  • コンバージョンとのひも付きを簡単にしたい

ですので、今回ご紹介する方式は、以下の要件を目指しました。

  • 作るタグや変数は少なく
  • H2など見出しタグで識別したい
  • 読了したかどうかをCV識別しやすくする
  • イベント発火数を極力おさえる

結果、作るのはタグ2つとトリガー1つだけ(上図の色のついている部分)というシンプルなものになりました。

n番目の見出しタグを認識可能(なのでレスポンシブでも把握しやすいはず)。

イベント発火回数をおさえセッション内500ヒットというGoogleアナリティクスの上限をほぼ気にしなくて良くなっています。

スクロール計測の分析の様子

イベントをスクロールのたびに発火させますと、たとえば10ページ見て、かなり熟読して都度50イベントですと、意外とすぐに、セッション内500ヒット上限がきちゃうんですよね。
読了率の違いがすぐにわかる

ユニバーサルアナリティクスタグでは、タグ呼び出しオプションという設定がありそこで「1 ページにつき 1 度」とすれば、何度もイベント発火せずにすみ、ヒット上限をおさえられるのでした。

とはいえ、バグなど不具合ありましたらSNSなどでご指摘いただけますと、ありがたいです。

それではどうぞ。

謝辞

今回、スクロールイベントのコードはこちらを参考にさせていただきました。ありがとうございます。
>>ある要素が表示されたときに命令を実行するJavaScript w/ jQuery | へんな柳生
>>何番目系の便利なCSSまとめ – Qiita

カスタムイベントで1ページにつき1回、イベントを発火はこちらを参考にしました。ありがとうございます。
>>JavaScriptからGoogleタグマネージャに登録している任意のタグを呼び出す方法|コラム アユダンテ株式会社

スクロール計測の設定方法

作りますのは、タグ2つとトリガー1つだけです。jQueryが使える環境、本文の見出しがh2タグで書かれている前提で書いています。

ID付与するカスタムHTML

JavaScriptタグで囲って、カスタムHTMLに入れてください。上記YAGYUさんのコードほぼそのままです。感謝。

$(function() {
$("div.kizi h2:nth-last-of-type(2)").attr("id","dokuryou");
	var a = $("h2#dokuryou");
	$(window).scroll(function(){
		var b = $(a).offset().top - $(window).height();	
		if ($(window).scrollTop() > b) {
			dataLayer.push({'event': 'dokuryou'});
		}
});
});

以下、任意に変更してください。単純にh2をカウントとしちゃうと、サイドバーで使ってる場合もあるので、記事本文配下のものだけをカウントするようにしました。

  • div.kizi というのは本文があるdiv部分を指定しました。
  • dokuryou というIDを、下から2番目のh2に付与してます。
  • IDが表示されたら、eventをpushしてます。

GAタグ(イベントトラッキング)

Googleアナリティクスタグは、もともとページビューなどで使っているタグを複製しますと楽です。
Googleアナリティクスタグの設定

ポイントは、今回は読了したらCV!みたいなシンプル把握をしたい、ということで「1ページにつき1度」という呼び出しオプションを設定するところがミソです。

カスタムイベントトリガー

トリガーの新規作成で、カスタムイベントを選びます。前述のタグからpushされたイベントをキャッチします。
カスタムイベントトリガー

Googleアナリティクスの目標設定

あとは、読了したときに発火するイベントトラッキングを、コンバージョンに設定すればOKです。管理>ビュー>目標「新しい目標」 から設定してください。コンバージョン値も任意でOKです。
イベントをコンバージョン設定する

準備はこれでOKです。プレビューで確認したり、適宜カスタムHTMLにconsole.logなどを入れてデバッグして実装してみてください。

お疲れ様でした。

読了率を分析してみて思ったこと

opt_noninteractionはfalseでもいいかな

読了しているということを、読んでいるとみなせば(実際にはスクロールして見えているだけ)、直帰率に影響させちゃってもいいのかな、とも思いました。

コンバージョンの反映に時間差

リアルタイムのイベント、行動>イベント、コンバージョンのカウント、とそれぞれ反映のタイミングが異なりました。前述の順番ですぐに反映していました。イベントってPVよりは遅めな印象ですよね。

スマホとここまで差がつくとは

ここまで差がつくとは思いませんでした。平均で2倍、記事によっては4倍近い差がありました。読まれている記事を精査して、コンテンツボリュームをちょっと調整しないとなと思いました。

やっぱりコンバージョン便利

コンバージョンに紐付けできるようにシンプルに設計しますと、ほんと分析に応用がききますね。ランディングページやページの価値など、Googleアナリティクスの多くのレポートで紐付けて見られます。

読まれていて人気の記事は再度拡散

読了率をCVにできるとソートが出来ます(項目名をクリック)。そして「加重並べ替え」をしますと、さらにセッション数の多い順も加味してソートし直してくれます。つまり、よく読まれていて人気の記事といえますから、SNSなどで見逃した人に向けて拡散するのは好感されると思います。
読了率が高く人気のある記事は拡散する

今回は、こういうスクロール読了率計測もあるよ、ということでご参考になれば幸いです。

長文お読みいただき、ありがとうございました。

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社)

実践 Google タグマネージャ入門 増補版
Amazonで詳しく見る

関連情報リンク

スクロール計測関連

マクロ(変数)などを使うスクロール計測。
>>Googleタグマネージャーでスクロール量を計測する方法 株式会社レインボー・ジャパン

GoogleタグマネージャではなくjQueryのコードで実現。
>>イベントトラッキングでどこまでスクロールしたかを計測する方法 | Tips Note by TAM

スクロールデプスというライブラリ。
>>どこまでスクロール(閲覧)されているかをGoogleアナリテクスで分かる「Scroll Depth」を試してみた – Resound Log

今のGoogleタグマネージャのキャプチャ豊富に解説。
>>【グーグルタグマネージャー】ページスクロール測定。グーグルアナリティクスとScroll Depthでどこまでページがスクロールされたかを計測。【Googleアナリティクス】 | elstreet

スクロールトリガーがあるといいのにな。
>>Googleタグマネージャに自動イベントトラッキング機能が登場|コラム アユダンテ株式会社

スクロール計測を実装しても、アテンションやクリックなどヒートマップは使いどころがありますよね。無料からつかえるこちらがおすすめ。
>>ヒートマップ付きアクセス解析ツール | Ptengine

JavaScript関連

scrollTop()、けっこう私わすれちゃうんですよねえ。
>>1分でわかるjQueryのscrollTop() スクロール位置取得の使い方 | iwb.jp

ヒートマップツールもそうですが、座標取得ってマルチデバイス時代にはほんと奥が深いです。
>>jQueryのscrollTopで、どんなにスクロールしても0を取得してしま… – 人力検索はてな

画面サイズの判定、ほんと難しい。デザイナーさんとかほんと尊敬します。
>>画面サイズで読み込むJavascriptを切り替えるjs
>>画面サイズに合わせて高さを指定する3つの方法|Webpark

スクロール認識ということではパララックスで調べるといろいろと出てきます。
>>JavaScriptコードは1行のみ!超手軽にWebサイトでパララックス効果を実現できる「Rellax.js」使ってみた – paiza開発日誌

まとめ

ここまで見られたらCVにカウントする、とシンプルに設計して実装したスクロール計測。いかがだったでしょうか。

>>人気の「Googleアナリティクス」最新一覧はこちら。
Amazonで詳しく見る

Googleタグマネージャは、JavaScriptで使えるテクニックはほぼ使えますので、興味がわいた方はJavaScriptのスキルを深めていただくと良いかと思います。わたしも日々勉強です。

Googleタグマネージャ、ほんと面白いですよね!

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

読まれるよう頑張る。