オプティマイズをインストールする

オプティマイズをウェブサイトに追加する方法

ウェブサイトに短いコード スニペットを追加すると、オプティマイズがインストールされ、ユーザーにウェブサイト エクスペリエンス（テストやウェブサイトのパーソナライズ）を提供できるようになります。

前提条件

手順を進める前に、オプティマイズ アカウントと、Google アナリティクス プロパティにリンクされているコンテナが必要です。その方法については、オプティマイズを設定する手順をご覧ください。オプティマイズ スニペットでウェブサイトの HTML にタグを設定するには、その HTML への編集権限も必要です。

方法を選択する

オプティマイズをインストールする際には、Google アナリティクスの導入方法に応じて、以下の 2 つの方法をおすすめします。

  1. 方法 1 - グローバル サイトタグ（gtag.js）を使う場合。
  2. 方法 2 - Google タグ マネージャー（GTM）を使う場合。

方法 1: グローバル サイトタグ（gtag.js）を使ってオプティマイズをインストールする

注: Google タグ マネージャーを使用する場合は、こちらの手順に沿って設定を行ってください。

ステップ 1: アナリティクスを含むグローバル サイトタグを実装する

注: グローバル サイトタグとアナリティクスを使ってウェブサイトのタグ設定をすでに行っている場合は、ステップ 2 に進んでオプティマイズのコンテナ ID を追加してください。

オプティマイズをインストールするには、Google アナリティクスを含むグローバル サイトタグ（gtag.js）が必要です。グローバル サイトタグは、Google アナリティクスの管理コンソール（[管理] > [プロパティ] 列 > [トラッキング情報] > [トラッキング コード]）から、または以下の例をカスタマイズすることで取得できます。

例: Google アナリティクスを含むグローバル サイトタグ

以下のタグでは、gtag.js ライブラリを読み込み、GA_TRACKING_ID をデフォルトの Google アナリティクス プロパティ ID に設定し、Google アナリティクスにページビュー ヒットを送信します。

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

注: GA_TRACKING_ID を Google アナリティクスのトラッキング ID に置き換えてください。

詳しくは、アナリティクスのトラッキングを設定する方法についてのアナリティクス ヘルプセンターの記事をご覧ください。

ステップ 2: グローバル サイトタグにオプティマイズを追加する

Google アナリティクスのトラッキング ID を含むグローバル サイトタグ（gtag.js）を取得したら、gtag('config' 行にオプティマイズのコンテナ ID を追加する必要があります。以下はその例です。

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

カスタマイズしたグローバル サイトタグには、オプティマイズでアナリティクスとオプティマイズの ID を入力できます（[コンテナ] > [コンテナの設定] > [オプティマイズをインストール]）。

例: Google アナリティクスとオプティマイズを含むグローバル サイトタグ

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

注: GA_TRACKING_ID を Google アナリティクスのトラッキング ID に置き換え、OPT_CONTAINER_ID をオプティマイズのコンテナ ID に置き換えてください。

ステップ 3: ウェブサイトにグローバル サイトタグを実装する

ウェブサイトにグローバル サイトタグを実装するには、最適化するすべてのページで <head> タグの直後にコード スニペットを貼り付けます。

  • グローバル サイトタグがウェブサイトに実装済みの場合は、オプティマイズのコンテナ ID（上記のステップ 2 を参照）を追加し、既存のタグを <head> の先頭に移動します。
  • グローバル サイトタグがウェブサイトに実装されていない場合は、最適化するすべてのページで <head> の先頭に実装します。

注: ページごとに必要なグローバル サイトタグは 1 つのみです。

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

最大限の掲載結果を得るには、最適化するすべてのページで <head> の先頭にグローバル サイトタグを配置します。

グローバル サイトタグの上には、以下の項目のみを配置します。

  1. データレイヤーの初期化。注: dataLayer 変数は、ページ非表示スニペット（使用する場合）の後に再割り当てしてはいけません。
  2. オプティマイズのテストに使用する、JavaScript 変数、関数、または設定された Cookie を宣言するスクリプト。たとえば、実装やターゲティングに使用する jQuery や JavaScript ライブラリなどです。注: jQuery は、デフォルトではオプティマイズにインストールされません。
  3. （省略可）ちらつき防止に使用できるページ非表示スニペット。

方法 2: Google タグ マネージャーを使ってオプティマイズをインストールする

注: グローバル サイトタグ（gtag.js）を使用する場合は、こちらの手順に沿って設定を行ってください。

Google タグ マネージャーを使用してオプティマイズを導入する場合は、下記の手順に沿って設定してください。別のタグ管理システム（TMS）を使っている場合は、その指示に沿って既存の Google アナリティクス タグにオプティマイズを追加してください。

注:
タグ マネージャー経由でオプティマイズをインストールしている場合は、ページビュー タイプのトリガーを使用します。オプティマイズ タグでページビュー トリガーが使われていない場合、ページの非表示は正常に機能しません。DOM Ready やウィンドウの読み込みを使用すると、オプティマイズ コンテナの読み込みに時間がかかりすぎるためです。

カスタム トラッカー設定

カスタム トラッカー設定を使う場合には、タグ マネージャーとアナリティクスで共通の Google アナリティクス設定変数を使用し、タグ間ですべてのトラッカー設定を一致させる必要があります。

ステップ 1: 必要な情報を収集する

オプティマイズをインストールするには、以下の情報が必要です。

  1. アナリティクスのトラッキング ID。
  2. オプティマイズのコンテナ ID。
  3. タグ マネージャーとアナリティクスのトラッカー設定で、共通の Google アナリティクス設定変数が使用されていることを確認します。

ステップ 2: タグ マネージャーでオプティマイズを設定する

上記の情報を取得したら、次の手順に沿って、タグ マネージャーでオプティマイズを設定します。

  1. タグ マネージャーにログインして、アカウントを選択します。
  2. [タグ] > [新規] をクリックします。
  3. [タグの設定] > [Google オプティマイズ] をクリックします。
  4. オプティマイズのコンテナ ID を入力します。
  5. Google アナリティクス設定変数を選択します。
  6. [保存] をクリックして、トリガーを設定せずにタグを保存します。
  7. オプティマイズ コンテナにリンクされている、アナリティクス プロパティのアナリティクス ページビュー タグを開きます。
  8. [タグの設定] > [詳細設定] > [タグの順序付け] をクリックします。
  9. このタグが呼び出される前にタグを呼び出すチェックボックスをオンにします。[設定タグ] 見出しでメニューをクリックし、設定するオプティマイズ タグを選択します。
  10. オプティマイズ タグがページごとに 1 回起動するように設定して、保存します。
  11. タグ マネージャーのコンテナを公開し、変更を反映します。

詳しくは、タグ マネージャー ヘルプセンターのオプティマイズのタグ設定ガイドをご覧ください。

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

最大限の掲載結果を得るには、最適化するすべてのページで <head> の先頭にタグ マネージャー タグを配置します。

グローバル サイトタグの上には、以下の項目のみを配置します。

  1. データレイヤーの初期化。注: dataLayer 変数は、ページ非表示スニペット（使用する場合）の後に再割り当てしてはいけません。
  2. オプティマイズのテストに使用する、JavaScript 変数、関数、または設定された Cookie を宣言するスクリプト。たとえば、実装やターゲティングに使用する jQuery や JavaScript ライブラリなどです。注: jQuery は、デフォルトではオプティマイズにインストールされません。
  3. （省略可）ちらつき防止に使用できるページ非表示スニペット。

 

オプティマイズのインストールを確認する

オプティマイズのインストールが円滑に行われるようにするには、小規模なテスト用カスタマイズ（後で削除できます）を作成し、インストールに関する診断とプレビュー モードを使って、インストールが正しく行われるかどうかご確認ください。

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

ページ フリッカーについてのトラブルシューティング

ほとんどのウェブサイトでは上記の手順で十分に対応できますが、オプティマイズの実行中にページ フリッカーが発生する場合は、グローバル サイトタグやタグ マネージャーを移動してページの <head> 内の上部に配置します。それでも「ちらつき」が目立つ場合は、アンチフリッカー スニペットをインストールし、ニーズに合わせてカスタマイズしてください。

他の実装方法

グローバル サイトタグ（gtag.js）と Google タグ マネージャーは、新しく実装を行う際に推奨されるタグ設定の方法です。ユニバーサル アナリティクスをご利用の場合は、この記事をご覧いただき、analytics.js を使ってオプティマイズをウェブサイトにインストールしてください。また、タグ マネージャーと一緒にオプティマイズをページに直接インストールする手順も併せてご覧ください。

注: オプティマイズは、従来の ga.js ライブラリでは機能しません。

高度なタグ設定テクニック

動的ページとウェブアプリ

たとえば、動的なページやウェブアプリでは、アクティベーション イベントを使って、オプティマイズ スニペットを読み込んだ後に設定される変数をターゲットにすることもできます。

オプティマイズやタグ マネージャーの複数のコンテナ

1 つのページを除くすべてのページに 'send_page_view': false を追加することで、その 1 ページで複数の gtag コマンドを使用できます。

例: 複数の gtag コマンド

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

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

</script>

 

注: GA_TRACKING_ID を Google アナリティクスのトラッキング ID に置き換え、OPT_CONTAINER_ID_1 と OPT_CONTAINER_ID_2 をオプティマイズのコンテナ ID に置き換えてください。

ページ非表示スニペットを使用する場合（省略可）は、スニペットがすべてのコンテナを渡すように設定する必要があります。詳しくは、オプティマイズのデベロッパー向けサイトで複数のコンテナの読み込みについての記事をご覧ください。

dataLayer のカスタム名

dataLayer の名前をカスタマイズする場合は、スクリプトで「l」パラメータを渡し、gtag 関数も変更する必要があります。

例: dataLayer のカスタム名

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

注: GA_TRACKING_ID を Google アナリティクスのトラッキング ID に置き換え、OPT_CONTAINER_ID をオプティマイズのコンテナ ID に置き換えてください。

上記の例では、以下の 3 つの変更箇所がハイライト表示されています。

  1. &l=myNewName を <script> タグに追加
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

ちらつきを減らすためにページ非表示スニペットを使う場合は、dataLayer のカスタム名を使う際に、最終行の dataLayer 名を変更する必要があります。以下の例では、「dataLayer」が「myNewName」に変更されています。

例: ページ非表示スニペット内でカスタム dataLayer を使用する

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

注: OPT_CONTAINER_ID をオプティマイズのコンテナ ID に置き換えてください。

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