SPAにおけるGTM・GAの検討事項

概要

シングルページアプリケーション（SPA）のCSR（Client Side Rendering）での画面
切り替えでは、GTMのロードが発生せず、またHTMLの要素を動的に変化させない場合は思わぬログ欠落が発生することがあります。

「タグをそのまま貼った結果、フロントエンド実装後の疎通確認のタイミングで問題が起きた」というのは割とよくあるケースなので、よくある問題と対策を記しておきます。

※ここではGTM側の細かい設定方法については触れません。

よくある問題

1) ページビュー

ページ遷移が発生しないため、GTMもロードされずページビューのログが飛ばない。

→ 都度グローバルのオブジェクトをリセットし、gtm.jsをロードする必要がある or dataLayerのカスタムイベント経由でページビューを発生させる。

2) ページタイトルディメンション

titleタグが変更されないため、ページタイトルディメンションが固定される。

→ titleタグを動的に変化させる or GTM（dataLayer）側でディメンションを上書きする必要がある。

3) 「前のページの遷移」ディメンション

document.referrerが変化しないため、UAにおいては「前のページの遷移」ディメンション、GA4においては「page_referrer」パラメーターが固定される。

----- （2022年12月編集・追記 ここから） -----

→ GTM（dataLayer）側でディメンションを上書きする必要がある。

Universal Analyticsにおいてはreferrerはトラフィックソースの算出に利用されるため、ページ遷移ごとにreferrerをセットしてしまうと 都度新規セッションとなってしまいます。（セッション数やトラフィックソースの計上が狂ってしまいます）
Universal AnalyticsではSPAでもURL自体が正しく変化していれば正しく計上できるはずです。

ウェブサイトにトラフィックを送り込んだ参照ソースを指定します。この値はトラフィック ソースの算出にも使用され、値の形式は URL となります。このフィールドは create コマンドで初期化され、alwaysSendReferrer フィールドが true に設定されている場合を除き、現在のホスト名が参照 URL のホスト名と異なる場合にのみ設定されます。
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference?hl=ja

なお、GA4においてはページ遷移の度にドメイン関係なく drパラメータがセットされています。

------- （ここまで） --------

4) クリックイベントのページ情報

クリックイベントの関数実行より前にDOM構築が完了してしまい、「遷移先ページで発生したイベント」としてログ計測される。

※「ページAでのURLクリックでクリックイベントが発生して、ページBに遷移」の場合に、そのクリックイベントがページBで発生したように計測される。

→ クリックイベントの実行タイミングを担保する必要がある。

対策

GA/GTM関連のオブジェクトのリセット

画面遷移を遷移してもグローバルオブジェクトがリフレッシュされないため、GA/GTM関連のリセット処理を都度実行します。

google_tag_manager["GTM-${CONTAINER_ID}"].dataLayer.reset()

GAのトラッカー名を指定している場合は念のためトラッカーもリセットします。

ga('${TRACKER_NAME}.remove’)

カスタムイベント（dataLayer）を使ったページビューの送信

画面遷移ごとに、GTMのカスタムイベント経由でページビューを発生させます。

なお、 pageUrl、pageTitle、previousPageUrlもdataLayerにセットし、GTM側で設定フィールドのオーバーライドします。
これにより ページURLとページタイトルのディメンションを動的に変化させることができます。

dataLayer.push({
    'event': 'csr_pageview', 
    'pageUrl': '${pageUrl}',
    'pageTitle': '${pageTitle}',
    'previousPageUrl': '${previousPageUrl}',
}); 

※previousPageUrlはGA4のみ利用します。UAでリファラー上書きを行うとセッション数が狂います。

※「画面遷移であればCSR、直接のURLアクセスであればSSR(Server Side Rendering)」といった実装パターンもあると思いますので、カスタムイベント名は csr_pageview 、 ssr_pageviewのように2つ用意し、個々のレンダリングでイベント処理を分けておくといいと思います。

※dataLayerのpush()のタイミングに注意

「DOM構築の完了やURLの変更より前にdataLayer.push()をしてしまう」と、前のページの情報でページビュー送信されてしまいます。
このため実行順序の担保が必要ですが、フロントエンドのフレームワークの都合上難しい場合にはpush()のタイミングを setTimeout(func,0) で遅延させることで解決するかもしれません。

クリックイベントの実行タイミングの調整

「クリックイベントの実行よりも前にDOM構築やURLの変更が完了する」場合は、クリックイベントが先に実行されるような形で順番を担保することが必要です。

おわりに

「SPAのページで正常にログが取れていないが、何が起きているかわからない」といったケースは散見されます。疎通確認のタイミングでの実装変更を避けるためにも、事前にSPA対応の方法を把握しておくと良いと思います。

また、ログの疎通確認も慎重に行うことをおすすめします。

参考URL