本当に知りたいことと、その後のアクションは何なのか

これについては、各社いろいろな考えがあるかと思いますが、よく聞くのが「最後までちゃんとコンテンツを読んでくれた人を知りたい」です。しかしながら、その本当の考えは、「コンテンツ内のどの場所で離脱が発生しているかを知り、その離脱ポイントのコンテンツを改善する」ことだと思います。

つまり、最終的に「コンテンツの改善」というアクションを取りたく、その改善を行う場所を特定するために「スクロール計測」を行っていると考えられます。

よくある実装方法

既にいろいろなサイトでたくさん語られているスクロール計測の方法を簡単に言うと「ページのスクロールが10%進むごとにイベントトラッキングしましょう!」という趣旨のものです。これについては、探せばいろいろな解説サイトも出てきます。jQueryを使ったJavaScriptコードも出てきますし、Googleタグマネージャを使った設定方法も出てきます。

今回の記事の目的はこれらの方法を紹介することではありません。もしパーセントを使った手法を知りたい方は、他のサイトをあたっていただくのが良いと思います。

この実装方法の問題点

今まで使われているパーセントを用いる計測はナンセンスです。実際、30%から40%の範囲で離脱が多く発生していることがレポートから分かったとしても、その離脱しているポイントがどこなのかを読み解く必要があります。さらには、PCレイアウトとモバイルレイアウトで、パーセントのしきい値が変わってしまう可能性も十分にあります。実際、PCレイアウトではサイドバーに置いていたコンテンツをモバイルレイアウトにした時に、フッターに縦積みにするようなレイアウトだった場合、PCレイアウトとモバイルレイアウトで読了率として計測していたパーセントの値は大きく変わります。サイドバーがそのまま真下に落ちるサイトは少ないとしても、PCレイアウトのときに複数カラムで展開していたコンテンツが、モバイルレイアウトになったときに1カラムの縦積みになるデザインは少なくありません。

つまり、この実装方法の問題点は下記の2点に集約されます。

  • パーセントが分かっても、その位置に対応するコンテンツを探す手間がある。
  • ユーザーの閲覧環境によって、コンテンツとパーセントの関係は変わってしまう。

こういった理由があり、アクションに結びつけるのが難しいことがあり、自分は既にパーセントを基準にしたスクロール計測は行っていません。

改良された現代版スクロール計測

では今、スクロール計測を行うのであれば、どのような計測を実装するのがよいでしょうか。ここでは、話を簡単にするためにSEM Technologyのような「ブログのコンテンツページ」におけるスクロールで説明します(しかし、同じ考え方はブログに限らず多くのサイトで応用可能です)。

概要

まずは、実際に自分が見ているレポート画面を見てもらうのが分かりやすいと思います。下記のレポートは、Googleアナリティクスの「行動>イベント>ページ」レポートからページを絞り込み、目的のイベントのみが表示されるように「イベントカテゴリ」「イベントアクション」を絞り込んだときのイベントラベルのレポートです。

今までであれば、パーセントが縦に並んでいた場所が、このレポートでは記事のセクション名になっています(セクション名の前の「H2」は、タグ名を意味しています)。これなら、このレポート画面を見るだけで、「どの記事セクションで離脱が発生しているか?」が分かりやすくまとまります。離脱ポイントがすぐに分かるので、コンテンツのリライトすべきポイントも自ずと見えてきます。

これとは別に、記事の読了数も見れるようにしたいため、読了時にも別のイベントを送信するようにしています。この読了率も実は、パーセントを用いたしきい値を設定する方式ではなく、記事の最後を捉えてイベント送信しています。

実装方法

ここで紹介する実装方法は、Googleタグマネージャの機能を前提としています。通常のJavaScriptで記述する場合は、かなり複雑になると思いますので、フロントエンドのエンジニアの方にご相談していただくのがよいと思います。

変数の追加

変数は、全部で2つ追加します。1つ目は「タグの名前」を取得するための変数で、2つ目は「タグの要素テキストの値」を取得するための変数です。

タグの名前を取得するための変数は単純で「変数の種類」に「データレイヤーの変数」を指定し、「データレイヤーの変数名」に「gtm.element.tagName」と入れるだけです。カスタムの項目をデータレイヤーの変数を用いて作成するときは、「dataLayer.push」コマンドが必要なケースが多いですが、「タグの名前」はそのようなコマンドを使うことなく、上記の変数を作成するだけで済みます。

次に、「タグの要素テキストの値」を取得するための変数は、「変数の種類」に「自動イベント変数」を指定し、「変数タイプ」で「要素テキスト」を選択したものを作成します。こちらも、JavaScriptコードを書くことなく作成することができるので、プログラミングに詳しくなくても簡単に作成することが可能です。

下記が、作成した2つの変数のキャプチャになります。

トリガーの追加

ブログ記事のセクションが表示されるごとに発火するトリガーを作成します。これには、Googleタグマネージャで2017年の秋頃に実装されたトリガータイプである「要素の表示」を用います。

このトリガータイプを用いて、下記のようなトリガーを作成しましょう。下記の例では、「このトリガーの発生場所」と「要素セレクタ」の値がSEM Technology用になっているので、自身のサイトに合わせてこの2つを変更してください。

このトリガーにより、ページがスクロールされ、h2タグでマークアップされた要素が表示されるタイミングで発火させることができます。

タグの追加

ここまできたら、タグの設定はイメージの着く方も多いと思いますが、下記の内容で設定します。配信トリガーに作成したトリガーを指定し、イベントの属性に「要素のタグ名」と「要素のテキスト名」を入れています。場合によっては、「要素のタグ名」は不要かもしれません。

この実装の応用

記事の読了のタイミングでもイベントを発火させたいケースがあると思います。上記の実装は、各セクションごとにイベントが送信されてしまい「読了」を分けて計測することができません。

しかしながら、上記の実装を応用して、「記事のフッター部分にある要素が表示されたとき」というトリガーを作成し、そのトリガーを利用することで、「読了」を別イベントとして送信することができます。SEM Technologyでも、「記事フッターにある広告枠」が表示されたときに、個別のイベントタグを実行するようにしています。

まとめ

この記事では、「今まで多くのケースで実装していたスクロール計測」をさらに進化させた実装方法を紹介しました。また、ここで紹介した実装は、JavaScriptで堪能な方でなくても、簡単に実装することができる内容になっています。

今までのパーセントを用いたスクロール計測でうまくアクションに繋げることができなかった人や、これからスクロール計測を実装しようとしている人はオススメです。