optimize.js(同期)をインストールする

対象

この記事は、optimize.js(同期)を使用してオプティマイズをインストールするお客様を対象としています。

同期と非同期のどちらをインストールしたらよいかわからない場合は、まずオプティマイズのインストールの概要をご覧ください。

下記の手順に沿って、ウェブサイトにオプティマイズをインストールします。

要件

オプティマイズの初期設定をまだ完了していない場合は、まずは完了してからスニペットをウェブサイトにインストールしてください。以下は必要事項のチェックリストです。

  1. Google アナリティクスのアカウントとプロパティ。

  2. Google アナリティクスがウェブサイトにインストールされていること。

  3. オプティマイズ アカウントとコンテナGoogle アナリティクス プロパティにリンクされていること。

  4. オプティマイズ スニペットを追加するためのウェブサイト HTML に対する編集権限。

上記のすべてを準備したら、ウェブサイトにオプティマイズ スニペットをインストールしてください。詳しい手順は、オプティマイズを設定するでご確認ください。

optimize.js(同期)を使用したオプティマイズのインストール

オプティマイズの同期バージョンは、パフォーマンスが最も良く、ウェブサイトのレンダリング速度への影響を最小限に抑えるため、ほとんどのユーザーに推奨されています。

下記のオプティマイズ スニペットを、ウェブページ内の <HEAD> の先頭に配置します。

<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>
注: OPT_CONTAINER_ID は、オプティマイズ コンテナ ID に置き換えてください。

同期スニペットを使用すると、ほとんどの場合アンチフリッカー スニペットは必要ありません。

 

スニペットの配置に関するおすすめの方法

最適な掲載結果を得るには、最適化したいすべてのページの <HEAD> タグの先頭にオプティマイズ スニペットを配置します。

オプティマイズ スニペットの上には、以下の項目のみを配置してください。

  1. dataLayer 初期化コード。注: dataLayer 変数は、アンチフリッカー スニペット(使用する場合)の後に再割り当てしないでください。
  2. オプティマイズに使用する、JavaScript 変数、関数、または設定された Cookie を宣言するスクリプト。たとえば、実装またはターゲティングに使用する jQuery や JavaScript ライブラリなどです。注: jQuery は、デフォルトではオプティマイズにインストールされません。
  3. ページ フリッカーの軽減に使用できるオプションのアンチフリッカー スニペット

オプティマイズの実装状態を確認する

オプティマイズが円滑に動作するには、簡単なウェブサイトのパーソナライズを作成し、実装状況の診断プレビュー モードを使用して、ブラウザで想定どおりに表示されるかどうか確認することをおすすめします。

  • 実装状況の診断では、オプティマイズの実装状況を確認できます。情報パネルで [インストールを確認] をクリックしてください。問題が検出された場合には、診断メッセージが表示されます。詳細
  • プレビュー モードでは、エクスペリエンスを開始する前に、正しく表示されるかどうかを確認できます。詳細
  • Google Tag Assistant は、任意のページでのグローバル サイトタグ(gtag.js)の実装を自動的に検証する、Chrome の拡張機能です。詳細

ページ フリッカーを軽減する

ページ フリッカーは JavaScript フリッカー、DOM フリッカー、FOUC(Flash Of Unstyled Content)、FOUT(Flash of Unstyled Text)とも呼ばれます。この現象は、すべての情報が取得される前に、ブラウザ エンジンによってウェブページが表示される際に(つまり、新しいスタイルルールが読み込まれて適用された後で再度読み込みが行われる前に、ページがブラウザのデフォルト スタイルで一瞬表示されることで)発生します。

ウェブサイトでフリッカーが確認される場合は、オプティマイズ スニペットを HTML の <HEAD> の先頭に移動してください。それでもフリッカーが確認される場合は、アンチフリッカー スニペットをインストールし、ニーズに合わせてカスタマイズしてください。

従来版のオプティマイズ スニペットを削除する

 従来版のオプティマイズ スニペットがウェブサイトに設定されている場合は、そのスニペットを削除してからサイトのタグを設定し直す必要があります。

すでにオプティマイズをご利用かどうかご不明な場合:
Chrome 拡張機能の Tag Assistant を使用するか、ウェブページのソースコードを表示してオプティマイズ コンテナ ID を見つけます。

オプティマイズ スニペットを削除する方法

オプティマイズの削除は、a)ウェブサイトでのオプティマイズのインストール方法と、b)Google アナリティクスの実装方法によって異なります。ご利用の実装方法に基づいて、下記の手順に沿ってオプティマイズ スニペットを削除します。

オプティマイズの
インストール方法
Google アナリティクスの
測定方法
手順
GTM タグ マネージャーでオプティマイズのタグを削除します。詳細
analytics.js GTM analytics.js スニペットをページから削除します。
gtag.js GTM gtag.js スニペットをページから削除します。詳細
gtag.js gtag.js optimize_id」設定パラメータを gtag.js スニペットから削除します(下記の例 A を参照)。
analytics.js analytics.js ga(‘require’, ‘OPT_CONTAINER_ID’)」行を削除します(下記の例 B を参照)。

例 A

オプティマイズが gtag.js 経由でインストールされており、かつ Google アナリティクス測定が gtag.js によって実行される場合、optimize_id」設定パラメータを gtag.js スニペットから削除します。

変更前:

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

変更後:

gtag('config', 'GA_TRACKING_ID');

例 B

オプティマイズが analytics.js 経由でインストールされており、かつそのページが analytics.js によって(のみ)トラッキングされている場合は、analytics.js スニペットから「ga('require」の行を削除します。

変更前:

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');

変更後:

ga('create', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');

アンチフリッカー スニペットをインストールしている場合は、同時に削除します。


 
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。