ページ内リンクって標準のGoogleアナリティクスですと、計測できないですよね。今回はそれをGoogleタグマネージャで実装しました。
こんにちは、Googleタグマネージャ大好きカグア!です。
今回、ハッシュ付きページ内リンク計測を試しました。SPAやスライダーなどハッシュ(#)リンクの計測には応用できるかと思います。それと、せっかくなのでGTMだけでUXの改修も行いました。
関連記事
>>Googleタグマネージャに予め設定しておくと便利な変数12本
>>Googleタグマネージャ基礎:クリック計測する設定<完全版>
>>Googleタグマネージャでクリック計測とクロスドメイン設定
この記事の目次
ページ内リンク計測とは
SPA等ハッシュ(#)つきURLの計測
Aタグで指定するURLに、ハッシュ(#)をつけますと、ページ内の移動リンクを設置できます。縦に長いページなどでは利便性の向上が期待できます。
また、SPAなどシングルページアプリケーションや、jQueryの画像スライダーやアコーディオンUIなど、ハッシュ付きをクリックして挙動をコントロールするUIは多いかと思います。
ただ残念ながら、Googleアナリティクスではビーコンが送信されないため、基本的にはそのクリックは計測されません。
ページ内リンク計測の要件
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)」になります。
Googleアナリティクスのpage属性
Googleアナリティクス(ユニバーサルアナリティクス)タグの詳細設定に追記します。追加フィールドにpageを追加して追記しますと、ハッシュ付きURLが記録されます。通常のURLであればnull(ヌル=何もない)ので、追記しても大丈夫、というわけです。
Googleアナリティクスの詳細設定で、pageを追加しますと、任意のURLを送信できることを利用します。仮想ページビューでも使うテクニックです。
さて、それではページ内リンクの計測結果を検証していきましょう。
Googleアナリティクスでの分析確認
「すべてのページ」での計測
ページ内リンクをクリックしますと、行動>サイトコンテンツ>すべてのページ で、以下のように計測されました。
見づらいですが、いちおう識別できますね。
ページ内リンクのクリック分析
実際にはページ内リンクはどれくらいクリックされているのでしょうか。
アドバンスフィルタで絞り込んでみます。とりあえず、URL末尾の.htmlに何かしら付いてれば良さそうです。
ページ別訪問数でとりあえず見てみますと2.1%でした。ほとんどクリックされてない感じですね。
まあこの数字をどう解釈するかは担当者や戦略次第、ということになります。
さらにもう少し見ていきましょう。個別のユーザー行動を分析してみます。 ユーザー>ユーザーエクスプローラー を使います。
ページ内リンクの行動分析
予めカスタムディメンションにクライアントIDを入れておきます。その上で、ページ内リンクをクリックしているIDで絞り込みます。
すると例えばこちらのユーザーは、ページ内リンクを頻繁に行き来していることがわかります。
たぶん、このクリックの間って、スクロールをグリグリ~って毎回して目次に戻ってるんじゃないですかね。
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、楽しいですよ!
・ ・ ・ ・ ・
>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です