*

Googleタグマネージャ事例:GTMで仮想ページビューの実装

公開日: : 最終更新日:2018/09/29 タグマネージャー , , ,


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


【自宅でできる人間ドック】

Googleアナリティクスの仮想ページビューをGoogleタグマネージャで。
Googleアナリティクスの仮想ページビューを、Googleタグマネージャで実装したい。GTMが入っていれば簡単にできます。

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

本記事では、仮想ページビューのなかでも、ページ遷移してもURLが変わらないときに使う仮想ページビューのテクニックについて解説します。原理がわかれば、クリックで仮想PVさせたいときにも応用は聞くと思います。

関連記事
>>Googleアナリティクス基礎:仮想ページビューの設定と計測方法
>>イベントトラッキングの設定、ユニバーサル・タグマネージャ対応2015
>>Googleタグマネージャでクロスドメイン、サブドメイン設定をする方法

仮想ページビューとは

Googleアナリティクスで架空のURLで計測

仮想ページビューは、バーチャルPVなどとも呼ばれる、架空のURLをGoogleアナリティクスに記録させるテクニックです。

ページ遷移するも同一のURLしか表示されないようなウェブページでよく使われます。また、イベントトラッキングが普及していなかったころは、クリック計測なども仮想ページビューで取ることもよく行われていました。

GTMでバーチャルPVの実装の仕組み

すみれ
URLが変わらないのに、どうやってGAに送信するURLを変えるんですか?

カグア!
良い質問だね。でも、変わるものはあるよね?

すみれ
URLは変わらないけど・・・ページの中身は違います。確認とか完了とか。あ!

カグア!
そう。GTMでそれらの内容を読み取って、異なるURLをGAに送信するんだね。

すみれ
読み取るにはどうするのですか?

カグア!
GTMで変数を使う。といっても実質JavaScriptを書くんだけどね。

すみれ
やっぱり・・・(汗)。

カグア!
それでも難しいことではないよ。GTMでやるぶんエラーをはじいてくれるメリットもある。

すみれ
なるほど!ところでGAではURLを変えられるんですか?

カグア!
じつはトラッキングコードに情報を追加して送信すれば、GTMでなくてもできちゃうんだ。

すみれ
なんか凄い!これが「GAをごにょごにょする」なんですね!

カグア!
まあ、そうだねww。おおまかな流れは以下のような感じ。設定するところが多いけれど原理やそもそもの仕組み理解に重きをおいて進めるといいよ。

すみれ
了解です!

  1. URLが変わらないページで変わるものを探す(例:タイトルタグの中身など)
  2. GTMで(1)をキャッチする変数を作成
  3. GTMで(2)の内容によって、書き出すURLを変えるルックアップテーブル変数を作成
  4. URLが変わらないページ用のトリガーを作る(逆のトリガーは作ってもいいし、タグの「例外」で対応してもいいと思う)
  5. GAタグを複製して、仮想ページビュー用のものを作る
  6. (5)のGAタグに、詳細設定でpageを追加して(3)からURLをもらう

なんか、言葉でかくとややこしいのですがポイントは3つ。URLが変わらないページ用のトリガーを作る、そのページ内で変わるものをキャッチする変数とルックアップテーブルを作る、GAタグに反映させる、です。

さてそれでは実装・・・、とその前にいちおう注意点です。

仮想ページビュー実装の注意点

元々あるGoogleアナリティクスとの重複発火

今回紹介しますGTMで仮想ページビューを計測する方法は、別に仮想ページビュー用のGoogleアナリティクスタグを準備します。ですから、該当URLのときには、もとのGAタグが発火しないようにします。そうしませんとGoogleアナリティクスが重複して計測してしまいます。

ルックアップテーブルの厳密さ

今回の方法でご紹介しますルックアップテーブルは、使うときには慎重にしましょう。条件指定が「完全一致」しかありません。「含む」など幅があると良いのですが、現状では厳密に一致させるよう設定しましょう。この完全一致が曲者でブラウザのキャッシュや文字のエンコードなどフックしないケースも多々あるので、設置後も観察が必要です。

変数で情報が取れない場合

理想はタイトルタグあたりで「確認画面」「送信完了」などとあると嬉しい。それでもH1タグなどであれば、とりあえずdocument.querySelector()で取れるので、まあいいわけです。しかし、それでも変数で簡単に取得可能な部分に、ページ内容を見分けることができないと、さすがに断念することになるかと。

GTMで仮想ページビューの実装方法

それでは、GTMで仮想ページビューを実装する手順をおってご紹介します。
GTMで仮想ページビューの図

ページ内で異なる箇所を探す

GTMで仮想ページビュー実装の流れ1

Googleタグマネージャを使いますと、たとえURLが同じでも、異なる部分を拾い出せます。たとえば、タイトルやH1タグ内のテキストなど。

それらを根拠に、URLを出し分ければ良いのです。

たとえば、ページのタイトルが「入力フォーム」「確認画面」「送信完了」などと変わる、ということであれば、これをトリガーにできます。JavaScript変数で簡単に取得できます。
JavaScript変数

タイトルタグには変化がない、という場合はH1タグなどはどうでしょうか。カスタムJavaScript変数を使いますとH1内のテキストをひっぱってこれます。document.querySelector()、ほんと便利です。
クエリーセレクターで取得

クエリーセレクターは本当に便利なAPIです。Googleタグマネージャを攻略するとき、どうしてもJavaScriptは不可避なので、すぐに役立たなくともJavaScriptはじっくりと取り組むとほんと良いです。
クエリーセレクター

ルックアップテーブルで出力URLの出し分け

GTMで仮想ページビュー実装の流れ2

タイトルやH1などURLは同一なれど、ページ内で変わる要素があれば、それをもとにルックアップテーブルで出し分けます。

以下では、「送信完了」などのH1内文字に対応して、便宜上のURLを返している例です。以下のように、架空のURLをGAタグに送信し記録させるわけです。
ページ内で異なる要素を見つけ補完する

上図のように、この文言だったらこれを出力とできますのがルックアップテーブル変数です。仮想ページビューなどAにはBを、CにはDをと、複数出力することが多いときとても便利です。

注意すべきは完全一致という点です。左のデータ元とは完全に一致しませんと、指定した値を出力しません。

条件にヒットしない場合は「デフォルト値」で補完されます(未設定であれば何も返しません)。

これで、仮想ページビューのもととなるURLを出力する変数が完成しました。

では、トリガーやタグを設定していきましょう。

同一URLページかどうかのトリガー

GTMで仮想ページビュー実装の流れ3

URLが変化しないページでの稼働をさせるようトリガーをつくります。
トリガーの設定

そのURLを含む(もしくは完全一致)かどうかで設定します。そして今回は、そのURLである場合と、それ以外の場合とで動作するトリガーをつくります。

通常動くGAとそのURLで動くGAタグ

GTMで仮想ページビュー実装の流れ4

合わせてそれぞれで稼働させるGoogleアナリティクスタグを作っておきます。
URLが該当箇所かどうかで出し分ける

仮想ページビュー用のGAタグを用意するときは、もともと稼働しているGAタグを複製すれば良いかと思います。

GAタグでpage属性を設定

あとは、Googleアナリティクスのタグで、page属性を設定し、そこに前述のルックアップテーブル変数を指定すれば、GA側でその値をURLとしてキャッチしてくれます。

詳細設定>設定するフィールド>「+フィールド」とクリックしますと追加できます。ここに属性を追加しますと、トラッキングコードに追加で、情報をGAに送れるのです。
変数から動的に変える

上図ではタイトルまで代入していますが、page属性だけでも大丈夫です。

タグアシスタントで確認

プレビューで確認をした後、実装の確認をさらにタグアシスタントでも行います。
>>Tag Assistant (by Google) – Chrome ウェブストア

仮想ページビューを発動させるページを表示し、タグアシスタントをクリックし該当のGoogleアナリティクスをクリックします。そのうえで、PAGEVIEWの中身を確認します。正しく仮想ページビューが送られていれば、ブラウザで見えているURLと異なるURLが送信されていることがわかるはずです。
書き換えたURLになっているかどうかを確認

これで、正しく送信されていなければGoogleタグマネージャを確認します。

お疲れ様でした。

GTMで仮想ページビューの実装その2

たぶんこちらでも動くのですが、ちょっと経過観察中なのでいったん追記っぽく書いておきます。作り方はこちらのほうがシンプルです。

ルックアップテーブルの変数を作成

ページタイトルやH1などで取得した値から、仮想ページビューのURLを出力します。ポイントはデフォルト値に、{{Page Path}}を設定するところ。
Googleタグマネージャで仮想ページビュー

ようは「何もひっからなければ通常通りのURL(Page Path)が返してね」という仕組みです。

あらかじめGAタグにpage設定をしておく

それをもともと実装しているGAタグの詳細設定に page で追加します。そこに、{{仮想URLの変数}}を入れておきます。
あらかじめGAタグ

これだけです。そもそものページ内で異なる部分の抽出が簡単ですと、本当に楽かと思います。

お疲れ様でした。

ちょっと経過観察中

とりあえずは大丈夫っぽいのですが、現在経過観察中です。まれに、そのままスルーして出力されてしまうときもあるので。

日本語だとエンコードでひっかかるのかなとか、ブラウザのキャッシュでうまく拾えないのかななど、いろいろと仮説検証しながら様子を見ています。

CVに絡むページであることが多い仮想ページビューなので完璧を目指したいのですけどね。

みなさんも、仮想ページビューについて良い実装方法がありましたら、ぜひお教えください。

お疲れ様でした。

関連情報リンク

SRA World Congress 2015
Photo:license by usacehq

Googleアナリティクス公式ドキュメント。pageなど追加属性について記載。
>>ページ トラッキング  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

仮想ページビュー以外にも、いろいろなデータを送って、パーソナルDBのように。
>>GoogleAnalyticsのga(‘send’,〜)でいろんなデータを送ってみよう – Qiita

公式コミュニティでも仮想ページビューについてはよくトピックが立ちます。
>>解決済み: ページ判別手段につきまして – Google 広告主コミュニティ

仮想ページビューはPDFダウンロードなど、多くの利用シーンがありますよね。
>>リンクのクリックやダウンロードをページビューとして計測する! 仮想ページビューの使い方と注意点[第64回] | Googleアナリティクスとは/衣袋教授のGoogleアナリティクス入門講座 | Web担当者Forum

ページビューとしてカウントすると、目標プロセスなど、じつは多くのGA内の分析ツールが使えるメリットが。GAってPVにまつわるツールがやっぱり多いんですよね。
>>目標到達プロセスのレポートで、カートから購入までのボトルネックを見つけよう[第56回] | Googleアナリティクスとは/衣袋教授のGoogleアナリティクス入門講座 | Web担当者Forum

ようは送信するデータを、ユーザーが手動で送る、ということなんですよね。
>>お問い合わせのURLが完了ページまで同じだけどアナリティクスで計測したい! | ホームページ制作のサポートチャンネル『じおちゃん』

まとめ

Googleタグマネージャを使いますと、仮想ページビューもGTM内で完結できて便利ですね。

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社)

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社) |本 | 通販 | Amazon
Amazonで詳しく見る

GTMはA/Bテストなど、ほんといろいろと使いどころがあって、ウェブサイトをゴニョゴニョしたい人にはほんとおすすめのツールです。いつか勉強会とかやってみたいなー。

参考になれば幸いです!

「バーチャル。」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



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

Instagram

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

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑