アクセス解析

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

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

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

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

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

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

スキルシェアサービス「ココナラ」でご支援していますので、必要に応じてお声がけください。
その場合は下記リンクまで。ちなみにココナラが手数料が2割くらいかかる関係で、Twitterか直接お問い合わせフォームからご相談なら優先的に対応します。

お問い合わせフォーム
Twitterダイレクトメッセージ
GoogleアナリティクスGoogleタグマネージャ開発サポート | ココナラ
おまけ:このリンクから登録するとココナラの1000円分のプレゼントあります

GA計測イメージ

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

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

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

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

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

設定したHTML

<div id="area1" class="area" data-label="メインビジュアル">エリア1です。</div>
<div id="area2" class="area" data-label="サービス説明">エリア2です。</div>
<div id="area3" class="area" data-label="商品の説明">エリア3です。</div>
<div id="area4" class="area" data-label="料金">エリア4です。</div>
<div id="area5" class="area" data-label="お問い合わせ">エリア5です。</div>

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

前提条件

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

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です。

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

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

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

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

以上です。

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

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

お手伝い:ココナラ

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

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

-アクセス解析
-, , , , , , ,