楽天ページ内リンクって標準のGoogleアナリティクスですと、計測できないですよね。今回はそれをGoogleタグマネージャで実装しました。こんにちは、Googleタグマネージャ大好きカグア!です。今回、ハッシュ付きページ内リンク計測を試しました。SPAやスライダーなどハッシュ(#)リンクの計測には応用できるかと思います。それと、せっかくなのでGTMだけでUXの改修も行いました。追記:GTMによるUX改善のアプローチカスタムHTMLでJavaScript関連情報リンクGoogleタグマネージャ関連全般Googleタグマネージャおすすめ本まとめページ内リンク計測とはSPA等ハッシュ(#)つきURLの計測Aタグで指定するURLに、ハッシュ(#)をつけますと、ページ内の移動リンクを設置できます。縦に長いページなどでは利便性の向上が期待できます。SPAなどシングルページアプリケーションや、jQueryの画像スライダーやアコーディオンUIなど、ハッシュ付きをクリックして挙動をコントロールするUIは多いかと思います。残念ながら、Googleアナリティクスではビーコンが送信されないため、基本的にはそのクリックは計測されません。petukhovanton通常のページビューも計測リンククリックでハッシュが付いているものを計測ハッシュはとりあえずURLの末尾に結合して記録とりあえずこんな感じに考えました。ハッシュの値を取る変数とGAタグやトリガーを改修することになりそうです。ハッシュ付きURL計測の注意点いっぽうで、これまでページビューとしてカウントしてこなかったハッシュ付きURLを、新たに計測することとしますので、ページビューが増加します。新たにもう一つGAのプロパティIDを作成して、Googleタグマネージャでマルチトラッキングを設定しました。その新しい方のGAで、ページ内リンク計測を行おうと思います。これで、もともとのGAには影響を与えず試行錯誤ができます。それでは今回は、WordPressプラグインで自動生成された目次のハッシュ付きリンクを計測してみましょう。謝辞なお、今回のGoogleタグマネージャへの実装自体は、以下を参考にさせていただきました。Qiitaありがとうございました。Googleタグマネージャの実装Googleタグマネージャをプレビューモードにします。ページ内リンクをクリック。URL変数に、URLがハッシュ付きで計測されていることがわかります。変数を転用するこれで、GTMによる改修の目処がつきました。Googleタグマネージャで作っていきましょう。URLトリガーの詳細設定ハッシュの値を取得するには、URLトリガーのフラグメントを使います。ページ遷移してハッシュ付きならばこれでOK。今回は、クリックしてもページ自体は遷移しません。URL変数からにします。GTMでプレビューしてみます。通常のリンククリックでは、ハッシュ値はなし(null)、ハッシュ付きの場合はその値が取れました。URLは変数として使えそうですね。組み立ててみましょう。Googleアナリティクスの設定Googleアナリティクスタグをチューニングします。方針は以下のとおりです。通常のページビューとリンククリックでも発火させるリンククリック時にはpageをハッシュ値付きで記録するハッシュ付きURLリンクトリガーハッシュ付きURLのリンククリックは、正規表現でフックさせればOKです。それを、通常のページビューに追加します。そのまま追加すれば「または(OR)」になります。Googleアナリティクスのpage属性Googleアナリティクス(ユニバーサルアナリティクス)タグの詳細設定に追記します。追加フィールドにpageを追加して追記しますと、ハッシュ付きURLが記録されます。通常のURLであればnull(ヌル=何もない)ので、追記しても大丈夫、というわけです。Googleアナリティクスの詳細設定で、pageを追加しますと、任意のURLを送信できることを利用します。仮想ページビューでも使うテクニックです。それではページ内リンクの計測結果を検証していきましょう。以下のように計測されました。見づらいですが、いちおう識別できますね。実際にはページ内リンクはどれくらいクリックされているのでしょうか。アドバンスフィルタで絞り込んでみます。URL末尾の.htmlに何かしら付いてれば良さそうです。ページ別訪問数でとりあえず見てみますと2.1%でした。ほとんどクリックされてない感じですね。この数字をどう解釈するかは担当者や戦略次第、ということになります。個別のユーザー行動を分析してみます。カスタムディメンションにクライアントIDを入れておきます。その上で、ページ内リンクをクリックしているIDで絞り込みます。すると例えばこちらのユーザーは、ページ内リンクを頻繁に行き来していることがわかります。このクリックの間って、スクロールをグリグリ~って毎回して目次に戻ってるんじゃないですかね。すみれ長いページの下のほうだと、目次に戻るの面倒ですね。利用者2.1%とはいえ、ちょっとUXを改善してみようか。カグア!GTMだけで出来るんだ。すみれマジか!Googleタグマネージャでこういうことまで出来ますよ、ということで、早速GoogleタグマネージャでちょっとUX改善を試みてみます。追記:GTMによるUX改善のアプローチjQueryなどJavaScriptを使いますと、BODYに要素を後から追加できます。カスタムHTMLでJavaScriptカスタムHTMLにJavaScriptを書きます。使いますと、指定した要素の次にHTMLなどを追加できるのです。上記例では、h3とh2=目次に表示されている見出し、の上にトップに戻るページ内リンクを入れてみました。厳密には最後の単元の末尾にはつきませんが今回は諦めます。それでもないよりは良いかなということで、いったんこれで様子を見ましょう。効果が無いようであれば、削除します。GTMによる追加ですから、削除も簡単です。このUX改修では、目次を自動生成しますWordPressプラグインが、目次のDIVにIDを振ることを利用しています。以上、Googleタグマネージャでページ内リンクの計測とUX改善の試みでした。関連情報リンクGoogleタグマネージャ関連全般QIITAもGTM関連の記事は多数投稿されています。QiitaGTMを使って記事の読了率を調べる。ゆとりずむAMPでもGTM仕込めます。海外SEO情報ブログGTMのコンテナタグの位置が変わりましたよね。>>【注意!】Googleタグマネージャーのコンテナスニペット(タグ)の設置方法が変わりました。運営堂デザイン改修にこちらもGTMを利用。$shibayu36->blog;Googleタグマネージャおすすめ本Googleタグマネージャを活用するとき、JavaScriptの知識はとても役に立ちます。JavaScriptの基礎を学ぶのには、以下の書籍がおすすめです。(できる逆引きシリーズ)Amazonで詳しく見るまとめGoogleタグマネージャを使いますと、ちょっとしたデザイン改修まで出来てしまいます(JavaScript動作ONは必須ですが)。#ハッシュ付きリンク計測のテクニックは、SPAやJavaScriptエフェクトやAJAX計測など、さまざまな場面で応用が聞きますので、試されたことがないかたはぜひ。GTM、楽しいですよ!毎日更新がんばってます!はげみになりますので、よろしければご購読をぜひ!FEED購読(無料)は右画像をクリックしてください>>「おすすめ本。Yoshidaブロガー兼ユーチューバー。個人事業主でネット業界のお仕事24年目です。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。当サイトについて・プライバシーについて当ブログではGoogleアナリティクスとcookieを用い、個人を特定しない範囲でアクセス状況を記録しています。Google側ではその情報をGoogleアカウントと紐付けパーソナライズ広告に利用しています。その情報は取り扱いに注意しつつ、内容充実や企画立案など、皆様のお役に立てるよう活用しています。パーソナライズド設定をオフにするには、Google公式ページを御覧ください。運営するアフィリエイトプログラムに参加しています。それらのリンクからユーザー様が該当サイトにて購入されたとき、サイトが紹介料を獲得します。・引用/画像利用について当ブログでは一部外部の画像を利用しています。TwitterやInstagramなどSNSで公開された投稿については、本文の説明上必要と思われます著作権法で認められています「引用」としての利用として、ASPの埋め込み引用機能(エンベッド)を用い掲載をしています。・免責事項について当ブログの記事の内容や感想については、あくまでも個人的な見解となります。記事執筆当時の情報で、実際の状況や環境によって掲載内容と異なる場合がございます。万一トラブルや問題、損害が発生しましても、一切の責任を負えません。