SPA でも Google Optimize を使いたい

https://3.bp.blogspot.com/-vkozNBf8_VQ/Wp93-JMnIvI/AAAAAAABKp0/UN2DXcmm_oIP0ok5dsVFYCe-X_aSvgyewCLcBGAs/s800/kid_job_boy_seibishi.png

SPA と Google Optimize の関係

SPA 構成の Webアプリケーションに対して Google Optimize を適用すると、

Optimize の変更内容が適用されない

もとのページに戻ったときに、Optimize の変更内容が適用されない

アプリケーションを更新したら Optimize が効かなくなった

とか従来型のWebアプリケーションではなかったことが起こります。

これはなぜかと言うと、デフォルトではGoogle Optimize が変更を「ページの読み込み」で反映するようになっているから。

SPA になるとページ読み込みを発生させずに画面の切り替えが行われたりする(ブラウザ内部ではDOMの再構築が行われている)ので、こういった事情が理解できていないとハマりがち。

ということで、簡単に SPA でも Google Optimize が使える状態を作る設定をざっと書き出してみます。

Google Tag Manager の設定

まず Optimize を制御するために GTM の設定を行います。これは一番最初に1度だけ行えばOKです。

後に出てくるアクティベーションイベントの名前を変えた場合は、適宜読み替えたり再設定してみてください。

Google Tag Manager をまだ入れてない場合は事前に入れてください。

Google Optimize タグの配信

事前に Optimize のコンテナは作成をお願いします。

プリセットから Google Optimize のタグを作成します。配信トリガーは DOM Ready とします。

また、詳細設定から1ページに1度配信するように設定し、多重配信をしないようにしておきましょう。

カスタムHTMLタグの配信

Google Optimize のアクティベーションイベントをカスタムイベントに設定したので、カスタムHTML タグを作成して下記のようなHTMLを設定する必要があります。

code:html

window.setTimeout(function(){

dataLayer.push({'event': 'optimize.activate'})

}, 250)

</script>

これにより Google Optimize の発火タイミングを制御できるようになります。

このカスタムHTMLタグの配信タイミングは「DOM Ready」と「履歴の変更」を設定しましょう。

2つ設定するのは DOM Ready が初回ロード用、履歴の変更が画面遷移用であるためです。

ちなみに、このタグが配信される前に Google Optimize 本体の配信がされている必要があるので、カスタムHTMLタグの詳細設定＞タグの順序付けから、Google Optimize を事前に配信するよう依存関係を設定しておきましょう。

気をつけたいこと

カスタムHTML の setTimeout の待ち時間は 1(ms) 〜 500(ms) の間で許容できる範囲で設定しておきます。あまりに短すぎると画面を構成するDOMが構築される前に Google Optimize が動いてしまいます。逆に長過ぎると画面がガチャるのが露骨になるので適宜調整しましょう。

Google Optimize の設定

続いて Optimize の設定画面で、テストの作成を行い設定を進めていきます。

HTMLやCSSの書き換え設定自体は通常通り行って構いません。

試しにデバッグをして画面遷移をしてみるとわかると思いますが、SPA の場合は、Google Optimize の発火条件をページ読み込みにすると、最初の表示でしか変更が反映されません。

こういうときのために Optimize にはアクティベーションイベントを変更する機能があるのでこれを変更しましょう。

まずは、Google Optimize のアクティベーションイベントを「ページの読み込み」から「カスタムイベント」に変更します。

イベント名は何でもいいですが特に何もなければ、標準の「optimize.activate」でOKです。

ちなみに個別にイベントを割り振る場合は「optimize.activate.<わかり易い名前>」とかが個人的におすすめです。

このアクティベーションイベント名を変更した場合は、GTMに設定したカスタムHTMLを追加で設定する必要があることを覚えておきましょう。

気をつけたいこと

Optimize の編集画面から画面を遷移したりすると変更が取り消されたりするのでやめましょう。

完全な動作チェックは、テストケースのプレビューからデバッグを選択してチェックしましょう。

#blog #2020 #20200326