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

公開日: : 最終更新日:2017/03/22 タグマネージャー , , , ,


LINE facebook twitter URLコピー
B! pocket note 楽天


ハッシュ付きリンククリックはビーコンを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アナリティクス 増補改訂2版 Web解析の現場で使える実践ワザ 260 Googleタグマネージャ/オプティマイズ/データスタジオ対応 (できる逆引きシリーズ)

できる逆引き Googleアナリティクス 増補改訂2版 Web解析の現場で使える実践ワザ 260 Googleタグマネージャ/オプティマイズ/データスタジオ対応 (できる逆引きシリーズ)
Amazonで詳しく見る

まとめ

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

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

GTM、楽しいですよ!

「おすすめ本。」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile


Yoshihiko Yoshida
ブロガー兼ユーチューバー。個人事業主でネット業界のお仕事24年目です。40代で2児の父。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

PAGE TOP ↑