Google オプティマイズを利用した顧客体験の向上 第1回(神崎 健太) ケース別!Google オプティマイズ タグ設置のベストプラクティス

0208

この連載の対象読者

この連載は、Webサイトの運営や制作を担当している方を対象としています。Webサイトを訪れるユーザーに対して、より良い体験を提供するためにも、Google オプティマイズをぜひともご活用ください。

はじめに

昨今、Google オプティマイズを導入し、A/Bテストやパーソナライゼーションを行う企業が増えてきています。

Google オプティマイズでA/Bテストやパーソナライゼーションを行うためには、WebサイトにGoogle オプティマイズのタグを設置する必要がありますが、そのタグを設置するところで、多くの企業がつまずいているように思います。

そこで本稿では、Google オプティマイズ タグ設置のベストプラクティスをケース別に紹介します。Google アナリティクスのタグ設置状況に合わせて、ケース1~5のいずれかを参照・実行してください。

※Google オプティマイズを利用するためには、Google アナリティクスの利用が必須です。

ケース1:古いライブラリ(ga.js や urchin.js)を使用している場合

以下のヘルプに記載されている通り、Google オプティマイズは、古いライブラリ(ga.js や urchin.js)のGoogle アナリティクスのトラッキングコードに対応していません。

https://support.google.com/optimize/answer/6315871/
(2019年1月17日現在 英語のみ)

そのため、まずはGoogle アナリティクスのトラッキングコードを新しいライブラリ(analytics.js や gtag.js)に移行する必要があります。ライブラリ移行後のタグ設置方法については、ケース2以降を参照してください。

ケース2:「analytics.js」のトラッキングコードをサイトに記述している場合

「analytics.js」のトラッキングコードをサイトに記述している場合は、まずGoogle オプティマイズのUI上の「オプティマイズをインストール」を押下してください。

「オプティマイズをインストール」を押下すると、「オプティマイズ スニペットの実装」というダイアログが表示されるので、「ユニバーサル アナリティクス~詳細をご覧ください。」の「詳細」からヘルプページ「オプティマイズの導入」を表示してください。

続いて、ヘルプページに記載されている「ga(‘require’, ‘GTM-XXXXXX’);」というコードをコピーして、トラッキングコードの以下赤枠部分に挿入してください。

最後に、ヘルプページに記載されている以下のコードの赤枠部分をコピーして、トラッキングコードに追記し、「GTM-XXXXXX」部分をGoogle オプティマイズのコンテナ IDで置換したら、修正は完了です。

※修正済みトラッキングコードには、推奨設置位置があります。詳しくは、以下のヘルプを参照してください。
https://support.google.com/optimize/answer/6262084?hl=ja#tagging-best-practices

ケース3:「gtag.js」のトラッキングコードをサイトに記述している場合

「オプティマイズをインストール」を押下すると、「オプティマイズ スニペットの実装」というダイアログが表示されるので、赤字部分のコードをコピーして、トラッキングコードのconfig行末尾に挿入してください。

続いて、「anti-flicker snippet」からヘルプページ「アンチフリッカー スニペットを設置する」を表示し、ヘルプページ内に記載されている以下のコードの赤枠部分をコピーしてください。

コピーしたコードの「OPT_CONTAINER_ID」部分をGoogle オプティマイズのコンテナ IDで置換し、トラッキングコードの以下赤枠部分に挿入したら、修正は完了です。

※修正済みトラッキングコードには、推奨設置位置があります。詳しくは、以下のヘルプを参照してください。
https://support.google.com/optimize/answer/7513085/?hl=ja

ケース4:Google タグマネージャを利用している場合(推奨)

Google タグマネージャを利用している場合、以下2つの設置方法が考えられます。

(1)Google タグマネージャとは別に、Google オプティマイズのタグを設置する
(2)Google タグマネージャから、Google オプティマイズのタグを配信する

(2)の方がWebサイトの改修にかかる手間を抑えることができますが、以下のようなデメリットがあります。

  1. ページの読み込みにかかる時間が長くなる可能性があります。
  2. バリエーションページを表示する前に、オリジナルページがチラつく可能性があります。

そのため、2019年1月17日現在は、(1)の方法が推奨されています。

※ご参考:https://support.google.com/optimize/answer/6314801?hl=ja#alternate

ケース4では、(1)の方法について説明します。(2)の方法については、ケース5を参照してください。なお、ケース4・ケース5いずれの場合も、Google タグマネージャでタグの種類「Google アナリティクス – 従来版」を使用している場合は、タグの種類「Google アナリティクス – ユニバーサル アナリティクス」に移行する必要があります。

まずは、以下のURLよりヘルプページ「オプティマイズと Google タグマネージャ」を表示してください。
https://support.google.com/optimize/answer/7359264?hl=ja

続いて、以下の通りGoogle オプティマイズ用のタグを作成してください。

1.「例: ページを非表示にするスニペットと変更済みアナリティクス トラッキング コード」よりトラッキングコードをコピーする。
以下のコードの赤枠部分をコピーして、テキストエディタに貼り付けてください。

テキストエディタに貼り付けたら、以下4点編集を加えてください。
①下記コメントの削除

  1. <!– Modified Analytics tracking code with Optimize plugin –>
  2. // Update tracker settings
  3. // Add this line
  4. // Remove pageview call

②「UA-XXXXXXX-Y」部分をGoogle アナリティクスのトラッキングIDで置換
③「GTM-XXXXXX」部分をGoogle オプティマイズのコンテナ IDで置換
④改行やインデントを調整
編集が完了すると、以下のような状態になります。

2.トラッカーの設定をGoogle タグマネージャの「Google アナリティクス – ユニバーサル アナリティクス」(トラッキング タイプ:ページビュー)タグに合わせる。
具体的には、以下のフィールドを合わせてください。

  1. clientId
  2. sampleRate
  3. siteSpeedSampleRate
  4. alwaysSendReferrer
  5. allowAnchor
  6. allowLinker
  7. cookieName
  8. cookieDomain
  9. cookieExpires
  10. cookiePath
  11. legacyCookieDomain
  12. legacyHistoryImport
  13. storeGac
  14. useAmpClientId

例えば、「Google アナリティクス – ユニバーサル アナリティクス」(トラッキング タイプ:ページビュー)タグの「設定するフィールド」に「フィールド名:allowLinker」「値:true」という設定が入っている場合、Google オプティマイズ用のタグを以下のように修正する必要があります。

※修正時は、以下のページを参考にしてください。
https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers?hl=ja#the_create_method

3.トラッカー名を任意の名前(例:optimizeTracker)に変更する。
この対応は必須ではありませんが、トラッカー名の競合により、計測に不具合が発生するケースがあるため、念のため以下赤枠部分のように変更しておくことをおすすめします。

一通り修正が完了したら、修正済みのタグをGoogle タグマネージャのコンテナスニペットより上に設置してください。

※詳しい推奨設置位置については、以下のヘルプを参照してください。
https://support.google.com/optimize/answer/7359264?hl=ja#tagging-best-practices

ケース5:Google タグマネージャを利用している場合(非推奨)

ケース4の冒頭で説明した通り、Google オプティマイズのタグは、Google タグマネージャから配信することも可能です。まずは、以下のように、タグの種類「Google Optimize」タグを作成してください。

①Google オプティマイズのUIから「コンテナ ID」を取得・入力してください。
②「Google アナリティクス – ユニバーサル アナリティクス」(トラッキング タイプ:ページビュー)タグと設定を合わせてください。
※トリガーは不要です。

Google オプティマイズのタグ作成が完了したら、「Google アナリティクス – ユニバーサル アナリティクス」(トラッキング タイプ:ページビュー)タグの「タグの順序付け」設定を、以下のように変更してください。

変更が完了したら、プレビューモードにて動作検証の上、設定を公開してください。

Google タグマネージャの設定を公開したら、最後に、以下の「アンチフリッカー スニペット」(詳細は後述)をWebページに設置します。まずは、以下のURLよりヘルプページ「Google タグマネージャを使ってオプティマイズ タグを配信する」を表示してください。

https://support.google.com/optimize/answer/6314801?hl=ja

続いて、ヘルプページ内に記載されている以下のコードの赤枠部分をコピーし、「GTM-XXXXXX」部分をGoogle タグマネージャのコンテナ IDで置換した上で、Webページの セクションのできるだけ上の方( よりは後ろ)に設置してください。

アンチフリッカー スニペットについて

ケース2~5に記載した上記のコードは、「アンチフリッカー スニペット」と呼ばれます。「アンチフリッカー スニペット」の設置は必須ではありませんが、設置しておくと、ページの読み込み時にオリジナルページが一瞬チラついてしまう現象を抑止することができます。

1.タイムアウトの変更
「アンチフリッカー スニペット」は、Google オプティマイズの読み込みが完了するまで真っ白な画面を表示することで、上記のような現象を予防します。
一方で、Google オプティマイズの読み込みがなかなか完了しない場合に、真っ白な画面が延々と表示されてしまうのも問題なので、そういった現象が起きないように、「アンチフリッカー スニペット」にはタイムアウトの記述が入っています。
具体的には、4秒をオーバーすると、Google オプティマイズの読み込みを中断してオリジナルページを表示します。この4秒という待ち時間は、必要に応じて変更することができます。
例えば、4秒(=4000ミリ秒)から2秒(=2000ミリ秒)に変更したい場合は、「アンチフリッカー スニペット」の「4000」部分を、以下赤枠部分のように「2000」に変更しましょう。

2.「async-hide」クラスの名前の変更
「アンチフリッカー スニペット」には、「async-hide」というクラスに対してCSSを当てるような記述が入っています。
そのため、タグ設置対象のページで「async-hide」というクラスをすでに使用している場合、予期せぬ動作を引き起こす恐れがあります。
もし「async-hide」というクラスをすでに使用している場合は、「アンチフリッカー スニペット」の「async-hide」というクラス名を、以下赤枠部分のように別の名前に変更しましょう。

おわりに

以上で、Google オプティマイズ タグ設置のベストプラクティスを一通り網羅できました。最初は多少手こずるかもしれませんが、一度流れを体験できれば、以降は比較的スムーズに作業できると思います。

Google オプティマイズのUIには、Google オプティマイズのタグが正しく設置されているかどうか診断してくれる機能(https://support.google.com/optimize/answer/7577190?hl=ja)も実装されているので、そちらも参照しながら作業を進めてみてください。

Google オプティマイズ 360の導入や、その他Google マーケティング プラットフォーム関連のご相談は、以下のお問い合せフォームより承っております。お気軽にお問い合わせください。

神崎健太

執筆者 神崎健太

Google オプティマイズ 360 の利活用サポートをはじめとしたデジタルマーケティングの支援、アドテクノロジーの知見をもとにしたオンライン広告施策推進などを行っています。

お問い合わせ

当社のサービス・製品に関するご相談やご質問、お見積りのご依頼など、こちらからお問い合わせください。