Googleタグマネージャ事例:GTMだけで行うページ内リンク計測とUX改善

ハッシュ付きリンククリックはビーコンをGAに送信しない
ページ内リンクって標準のGoogleアナリティクスですと、計測できないですよね。今回はそれをGoogleタグマネージャで実装しました。

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

今回、ハッシュ付きページ内リンク計測を試しました。SPAやスライダーなどハッシュ(#)リンクの計測には応用できるかと思います。それと、せっかくなのでGTMだけでUXの改修も行いました。

関連記事
>>Googleタグマネージャに予め設定しておくと便利な変数12本
>>Googleタグマネージャ基礎:クリック計測する設定<完全版>
>>Googleタグマネージャでクリック計測とクロスドメイン設定

ページ内リンク計測とは

SPA等ハッシュ(#)つきURLの計測

Aタグで指定するURLに、ハッシュ(#)をつけますと、ページ内の移動リンクを設置できます。縦に長いページなどでは利便性の向上が期待できます。

また、SPAなどシングルページアプリケーションや、jQueryの画像スライダーやアコーディオンUIなど、ハッシュ付きをクリックして挙動をコントロールするUIは多いかと思います。

ただ残念ながら、Googleアナリティクスではビーコンが送信されないため、基本的にはそのクリックは計測されません。

ページ内リンク計測の要件

Portrait of a young business woman at office
Photo:license by petukhovanton

  • 通常のページビューも計測
  • リンククリックでハッシュが付いているものを計測
  • ハッシュはとりあえずURLの末尾に結合して記録

とりあえずこんな感じに考えました。ハッシュの値を取る変数とGAタグやトリガーを改修することになりそうです。

ハッシュ付きURL計測の注意点

いっぽうで、これまでページビューとしてカウントしてこなかったハッシュ付きURLを、新たに計測することとしますので、ページビューが増加します。

ですので、新たにもう一つGAのプロパティIDを作成して、Googleタグマネージャでマルチトラッキングを設定しました。その新しい方のGAで、ページ内リンク計測を行おうと思います。

これで、もともとのGAには影響を与えず試行錯誤ができます。

それでは今回は、WordPressプラグインで自動生成された目次のハッシュ付きリンクを計測してみましょう。

謝辞

なお、今回のGoogleタグマネージャへの実装自体は、以下を参考にさせていただきました。
>>SPAの各ページビューをGoogleアナリティクス+Googleタグマネージャーで簡単トラッキング! – Qiita

ありがとうございました。

Googleタグマネージャの実装

Googleタグマネージャをプレビューモードにします。ページ内リンクをクリック。すると、gtm.linkclickイベントで、Click URL変数に、URLがハッシュ付きで計測されていることがわかります。
目次をクリックしてプレビューで確認する

  • リンククリックトリガーを使う
  • Click URL 変数を転用する

これで、GTMによる改修の目処がつきました。

さっそく、Googleタグマネージャで作っていきましょう。

URLトリガーの詳細設定

ハッシュの値を取得するには、URLトリガーのフラグメントを使います。ページ遷移してハッシュ付きならばこれでOK。ただ今回は、クリックしてもページ自体は遷移しません。
ハッシュを検知

ですから、詳細設定で、URLの取得元をClick URL変数からにします。

早速、GTMでプレビューしてみます。通常のリンククリックでは、ハッシュ値はなし(null)、ハッシュ付きの場合はその値が取れました。
ハッシュが取得できてたっぽい

Click URLは変数として使えそうですね。さっそく組み立ててみましょう。

Googleアナリティクスの設定

Googleアナリティクスタグをチューニングします。方針は以下のとおりです。

  • 通常のページビューとリンククリックでも発火させる
  • リンククリック時にはpageをハッシュ値付きで記録する

ハッシュ付きURLリンクトリガー

ハッシュ付きURLのリンククリックは、正規表現でフックさせればOKです。それを、通常のページビューに追加します。そのまま追加すれば「または(OR)」になります。
GAタグを調整する!

Googleアナリティクスのpage属性

Googleアナリティクス(ユニバーサルアナリティクス)タグの詳細設定に追記します。追加フィールドにpageを追加して追記しますと、ハッシュ付きURLが記録されます。通常のURLであればnull(ヌル=何もない)ので、追記しても大丈夫、というわけです。

Googleアナリティクスの詳細設定で、pageを追加しますと、任意のURLを送信できることを利用します。仮想ページビューでも使うテクニックです。

さて、それではページ内リンクの計測結果を検証していきましょう。

Googleアナリティクスでの分析確認

「すべてのページ」での計測

ページ内リンクをクリックしますと、行動>サイトコンテンツ>すべてのページ で、以下のように計測されました。
ここがクリックされると、こう記録される

見づらいですが、いちおう識別できますね。

ページ内リンクのクリック分析

実際にはページ内リンクはどれくらいクリックされているのでしょうか。

アドバンスフィルタで絞り込んでみます。とりあえず、URL末尾の.htmlに何かしら付いてれば良さそうです。
最後が一致にして絞り込む

ページ別訪問数でとりあえず見てみますと2.1%でした。ほとんどクリックされてない感じですね。
2てん1パーセントがクリックしてた

まあこの数字をどう解釈するかは担当者や戦略次第、ということになります。

さらにもう少し見ていきましょう。個別のユーザー行動を分析してみます。 ユーザー>ユーザーエクスプローラー を使います。

ページ内リンクの行動分析

予めカスタムディメンションにクライアントIDを入れておきます。その上で、ページ内リンクをクリックしているIDで絞り込みます。

すると例えばこちらのユーザーは、ページ内リンクを頻繁に行き来していることがわかります。
ユーザーエクスプローラー

たぶん、このクリックの間って、スクロールをグリグリ~って毎回して目次に戻ってるんじゃないですかね。

すみれ
長いページの下のほうだと、目次に戻るの面倒ですね。

カグア!
そうだね。利用者2.1%とはいえ、ちょっとUXを改善してみようか。

カグア!
GTMだけで出来るんだ。

すみれ
マジか!

Googleタグマネージャでこういうことまで出来ますよ、ということで、早速GoogleタグマネージャでちょっとUX改善を試みてみます。

追記:GTMによるUX改善のアプローチ

jQueryなどJavaScriptを使いますと、BODYに要素を後から追加できます。これを応用します。

カスタムHTMLでJavaScript

カスタムHTMLにJavaScriptを書きます。jQueryで、.before() を使いますと、指定した要素の次にHTMLなどを追加できるのです。
要素を追加する

上記例では、h3とh2=目次に表示されている見出し、の上にトップに戻るページ内リンクを入れてみました。

厳密には最後の単元の末尾にはつきませんが今回は諦めます。それでもないよりは良いかなということで、いったんこれで様子を見ましょう。あまり効果が無いようであれば、削除します。GTMによる追加ですから、削除も簡単です。

なおこのUX改修では、目次を自動生成しますWordPressプラグインが、目次のDIVにIDを振ることを利用しています。

以上、Googleタグマネージャでページ内リンクの計測とUX改善の試みでした。

お疲れ様でした。

関連情報リンク

Googleタグマネージャ関連全般

QIITAもGTM関連の記事は多数投稿されています。
>>GoogleTagManagerに関する35件の投稿 – Qiita

GTMを使って記事の読了率を調べる。
>>その記事最後まで読まれている?ページの読了率をGoogleTagManagerを利用して取得する方法のまとめ – ゆとりずむ

AMPでもGTM仕込めます。
>>WordPress AMPプラグインにGoogleタグマネージャーを実装 | てらこや.work
>>Googleタグマネージャが⚡AMPに対応 | 海外SEO情報ブログ

GTMのコンテナタグの位置が変わりましたよね。
>>【注意!】Googleタグマネージャーのコンテナスニペット(タグ)の設置方法が変わりました。 | 運営堂

デザイン改修にこちらもGTMを利用。
>>Google Tag Managerを使ってバナーやメッセージをデプロイなしに切り替える – $shibayu36->blog;

Googleタグマネージャおすすめ本

Googleタグマネージャを活用するとき、JavaScriptの知識はとても役に立ちます。JavaScriptの基礎を学ぶのには、以下の書籍がおすすめです。

プロが教えるいちばん詳しいGoogle アナリティクス 4 | NRIネットコム株式会社, 神崎健太

まとめ

Googleタグマネージャを使いますと、ちょっとしたデザイン改修まで出来てしまいます(JavaScript動作ONは必須ですが)。

#ハッシュ付きリンク計測のテクニックは、SPAやJavaScriptエフェクトやAJAX計測など、さまざまな場面で応用が聞きますので、試されたことがないかたはぜひ。

GTM、楽しいですよ!

・ ・ ・ ・ ・

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

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

おすすめ本。