SPA（Single Page Application）のページビューをGoogleタグマネージャで設定してみよう
過去2回に渡って、GoogleアナリティクスをGoogleタグマネージャで管理するメリット、ページビュー・イベント設定方法をご紹介してきました。
今回はSPA（Single Page Application）のページビュー設定方法について。
SPAとは非同期で画面遷移を行うWebアプリケーションの事です。Goodpatchが提供しているProttも、非同期で画面が切り替わるSPAです。
SPAの場合、Googleアナリティクスを通常設定しただけでは画面遷移していないとみなされ、ページビューがうまく取れません。この設定をGoogleアナリティクスで直接行おうとすると、少々面倒です。
ここでGoogleタグマネージャを使うと、SPAのページビューも簡単に計測することができます。この記事では具体的な設定方法についてご紹介します。
Googleタグマネージャ導入について
Googleタグマネージャ導入のメリットは、開発せずに好きな要素やイベントを取得できます。また、イベントを直接コードに書き込まないため、イベント管理もしやすいのが特徴です。
導入のメリットや初期設定方法については、以下に詳しく記載しています。
SPAのページビュー設定方法
1.タグの作成
「ワークスペース>タグ>新規」を押してください。
上の画面が表示されます。タグの設定を押してください。「タグタイプを選択」画面が開きますので、「ユニバーサルアナリティクス」を選択します。そうすると「Googleアナリティクス設定」で変数が指定できるようになります。「新しい変数」を選択・作成を行いましょう。
すでにGoogleアナリティクスの変数を作成している場合は、作成済みの変数を選択して下さい。
2.変数の作成
どこのアナリティクスに送るか変数を設定しましょう。トラッキングIDに対象のGoogleアナリティクスID（UA-xxxxxxxx）を入れてください。入力できたら変数名を入れて保存しましょう。
すでに作成済みの人は飛ばして頂いて大丈夫です。
Googleアナリティクス設定に、作成した変数が入ります。
URLが「#ハッシュ」や「?パラメータ」で変わる場合
URLが「/スラッシュ」区切りで変更されるSPAなら良いですが、「#ハッシュ」や「?パラメータ」で変わる場合には追加設定が必要です。
上記「UAアナリティクス変数」の「カスタムフィールド」を選択し、ページの区切り方を指定してください。ここで指定したパスの通りにアナリティクスのページビューが表示されます。
URLにハッシュやパラメータが確実につかない場合は、以下の様な変数を作成してpageに指定すると、URLの後ろにハッシュやパラメータがある時のみ付けてくれます。
function(){
return location.pathname + location.hash + location.search;
}
※サービスに合わせて location.hash と location.search の順番を入れ替えてください。
3.トリガーの設定
ここからが通常のページビュー設定と異なります。 トリガー＞履歴の変更を選択して下さい。
選択すると、 全ての履歴の変更、一部の履歴の変更のラジオボタンが表示されます。初めてページビューを設定する場合は、このままトリガーを保存して設定して下さい。
GoogleアナリティクスまたはGoogleタグマネージャで既にページビューを設定している場合
アナリティクスまたはタグマネージャで既に設定している場合、このまま適用すると既存のページビューが2重カウントされてしまいます。タグマネージャでページビューを設定している場合は削除、アナリティクスを設定している場合は以下の対応を行って下さい。
タグの設定の中にトリガー＞例外があるので選択して下さい。トリガーの種類は同じく履歴の変更を選択します。
履歴の変更とは、パラメータやハッシュ含めたURLの変更がある度にページビューとしてカウントしてくれるトリガーです。
次に一部の履歴の変更ですでにページビューとしてカウントされているパスを設定します。
以下Prottの例です。既にGoogleアナリティクスが導入されていたため、SPAの最初のパス/projectはページビューとしてカウントされていました。そこで/projectをカウントの対象外として設定しました。
以下が設定後のタグの画面です。ProttはURL構造が複雑なためトリガーが複数設定されていますが、基本は履歴の変更と、例外を設定してあげれば大丈夫です。
テストを行った後リリースすれば反映されます。
4.確認方法
テストで動作確認ができてるかと思いますが、リリース後問題がないかすぐにGoogleアナリティクスでチェックしましょう。
今までカウントされていなかったURLの変更全てがカウントされるため、急激にページビューが上がります。ミスカウントがないか再度確認を行いましょう。
設定した日から急激にページビューが伸びています。
#以降のパスもページビューとしてカウントされています
Googleタグマネージャを使えば、面倒だったSPAのページビューも簡単に設定できます。
取れるデータを正確に取得しデータドリブンで施策を打つことは、グロースフェーズにおいて重要となります。Googleタグマネージャはデータを早く正確に取ることができる強力なツールです。この記事を参考に是非実践してみてはいかがでしょうか。