【手順】新機能!Googleアナリティクスでスクロール計測する方法(Googleタグマネージャ要素の表示)

これでスクロール計測が簡単になりました!

2017年中盤から、Googleタグマネージャに「スクロール計測」の新機能が登場しました。

「スクロール計測したい!」「ページがどこまで見られているか知りたい!」なんてお悩みの方は、Googleタグマネージャを使えば簡単に設定することができます。

以前までは無料ライブラリ「Scroll Depth」を使って計測をしていた方もこちらのほうがお勧めです。(10%ごとになど細かく設定できます。要素IDなどの指定も簡単です)

以下、略語使用します。
GA=Googleアナリティクス
GTM=Googleタグマネージャ

GA計測イメージ

最終的に、GAのイベントで、以下のキャプチャのように計測できます。
ページのPVに対して、どのエリアが何回表示されたか分析できます。
(特定の1ページでフィルタすることも可能です)

イベントカテゴリ:ID名
イベントアクション:data-label属性の文字列
イベントラベル:htmlタグ内の文字列

今回の計測対象のランディングページ

今回、テスト用に作成した計測のページは、各エリアのdivタグにid、classを設定しています。加えて、計測用のdata-labelという属性を付けました。

クラス名「area」
ID名「area」+連番
data-label属性「<エリアの計測名>」

設定したHTML

それでは、さっそくGTMの設定です。
GA、GTMの初期設定が済んでいることが、今回のスクロール計測の前提です。

前提条件

  • GTMでGAのタグを設置している
  • GTMのページビュー計測は設定済み
  • GAは設定して、計測確認済み

GTM変数の作成

まず、変数を設定します。
「組み込み変数」から「Click Text」を設定します。
該当のタグで囲まれた文字列を取得できます(例:「エリア1です」)

表示された「data-label属性」を「自動イベント変数」で取得します。

表示された「ID名」をデータレイヤー変数の「gtm.elementId」で取得します。

GTMトリガーの作成

続いてタグ配信条件である「トリガー」を作成します。
「要素の表示」をトリガー種類として、選択し、次の画像の通り設定します。

選択方法にIDを指定して「area1, area2, area3, area4」など複数のエリアの指定も可能なようです。

GTMタグの作成

続いて、タグを作成します。
今回、イベントカテゴリ、アクション、ラベルは次のように設定します。

イベントカテゴリ:ID名に設定した文字列
イベントアクション:data-label属性に設定した文字列
イベントラベル:表示された要素内の文字列

タグに作成したトリガーをひも付けます。

GTMプレビュー

設定後、設定したタグの配信状況を実ページで確認します。
画面右上の「プレビュー」ボタンをクリックします。

実ページ(HTMLページ)をブラウザを開きます。
GTMプレビューモードにて、動作を確認します。
スクロールして、該当のエリアでタグが配信されているか確認します。

GA計測確認(リアルタイムレポート)

GTM配信されていることを確認したら、GAを開きます。

GAのリアルタイムレポートにて、イベントが計測されていることを確認します。
設定したイベントカテゴリ、イベントアクションが計測されていればOKです。

数時間後、レポートにも反映されていることも確認します。

次のカスタムレポートを作成し、状況を確認すると便利です。

  • 種類:フラットテーブル
  • ディメンション:イベントカテゴリ
  • ディメンション:イベントアクション
  • ディメンション:イベントラベル
  • 指標:合計イベント
(ディメンションに「ページ」を追加して特定のページでフィルタすることもできます)

当日のデータは、数時間後に反映されます。確認するときは、設定期間に本日を含めることを忘れずに。

以上です。

ちょっと、Google アナリティクスの知識が足りないと感じた方は、まず書籍で学ぶことをお勧めします。

実践 Googleタグマネージャ入門 増補版 (デジタルプラスブックス)
インプレス (2015-05-22)
売り上げランキング: 528

お手伝い:ココナラ

ココナラで実装の依頼の受けています。

Googleアナリティクス/Googleタグマネージャお手伝い | ココナラ
coconala.com/users/156256