GoogleOptimizeとPtengineの連携方法

コンテンツ

事前の注意事項
設定方法
ヒートマップ確認方法
最後に

※GoogleOptimizeとPtengineの連携は、2023/5/24以前に作成されたプロジェクトでは、サポートしていません。ご不明点などがございましたら、ぜひお気軽にお問い合わせください。

GoogleOptimizeはGoogle マーケティングプラットフォーム製品シリーズの一つで、A/Bテストを行える製品です。管理画面からテストパターンを作ることができるツールとして注目されています。

様々なテストがエンジニアの力を借りずにできるため、Ptengineと併用することで、テストから分析、検証のスピードを格段に向上させることができます。

事前の注意事項 #

パターン別ヒートマップを確認する際は「ウェブビュー」でのご確認が必須となります
この方法ではテストパターン表示ごとに1イベントを消費します
GoogleOptimizeでエクスペリエンスを終了した場合、ヒートマップの確認時に各パターンごとのデザインを確認することができません。分析が終わっていない場合は、表示の割合を調整するなど工夫していただくようお願いいたします。

設定方法 #

STEP1　事前準備

Ptengineのカスタムイベントの活用が必要です。

  setTimeout(function(){
_pt_sp_2.push('setCustomEvent',{eventName:'イベント名'})
},3000)

このスニペットを各テストパターンごとに実行することで、それぞれのデータを分けて分析できるようにします。
今回は2パターンのテストを追加した場合を想定し下記のように「イベント名」を差し替えたスニペットを準備します。

  setTimeout(function(){
_pt_sp_2.push('setCustomEvent',{eventName:'optimize test A'})
},3000)

  setTimeout(function(){
_pt_sp_2.push('setCustomEvent',{eventName:'optimize test B'})
},3000)

STEP2　Google Optimizeで各パターンにスニペットを設置

まずは各パターンごとにテスト内容に沿って要素を差し替えをしましょう。

次に変更箇所を選択した状態で、下記のドロップダウンメニューから「変更を追加」をクリックします。さらにメニューが出てくるので「JavaScript」を選択してください。

モーダルが表示されるので、そこで先程のスニペットを入力します。

同じように別のパターンでも他のスクリプトを入力し保存します。
あとはGoogleOptimizeの仕様にしたがってテストを開始してください。
設定はこれで終了となります。

検証

該当のテストを表示されたらそれに応じたイベントデータが管理画面にて確認できます。
もし表示されていない場合はテストパターンを表示後、1時間ほど時間を置いて再度ご確認んください。

ヒートマップ確認方法 #

ウェブビューを使い、ABパターンごとのヒートマップを確認する方法をご紹介いたします。
管理画面のヒートマップでは常にオリジナルが表示されてしまうためウェブビューで狙ったテストパターンの表示をしましょう。

①調査するテストパターンのセグメントをかける

ヒートマップ画面でAパターン、もしくはBパターンのイベントデータでセグメントをかけます。(オリジナルの場合は各パターンのイベントを「含まない」というセグメントをかけます)
調査対象したいデバイスやセグメント条件はこのタイミングに適応しておきましょう。

②ウェブビューを実行

セグメントをかけたら次にウェブビューします。

③ディベロッパーツール起動

ウェブビューを開いたら、ディベロッパーツールを開きます。

Tip：ディベロッパーツールの開き方：
Mac: Cmd+Opt+I
Windows: Ctrl+Shift+I
共通: F12または「右クリック」 >> 「検証」

④Applicationを開く

次に下図の(2)箇所より「Application」を開きます。もし管理画面でスマホの状態でウェブビューした場合(1)の箇所からスマホに偽装してください。

⑤Cookieを書き換え狙ったテストパターンを呼び出す

続いて、下図の通り、(1)「Cookies」を選択 (2)サイトドメインを選択 (3) フィルターで「gaexp」を検索 (4)Name「_gaexp」が表示されるのでそのValueとして表示される箇所をダブルクリックします。 (5) するとValueを書き換えられるようになるので、イベントセグメントしたパターンに合わせて末尾を書き換えます。オリジナルの場合は「0」、パターン1の場合は「1」、パターン2の場合は「2」とGoogleOptimizeのエクスペリエンスで設定した順に割り振られています。 (6)Enterキーを押して決定し (7)ページを再読み込みしてください。

すると表示したかったパターンに切り替わります。

最後に #

これでGoogleOptimizeを利用した、A/Bテストごとでのヒートマップを確認できるようになりました。
Google Optimizeの他、私たちはOptimizelyとOptimizely Xの設定方法を紹介いたしました。
是非テストを重ね、ユーザー理解を深めましょう！

申しわけありません！理由を教えてください。

サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう。