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

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

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

前提条件

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

方法を選択する

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

方法 1 - グローバルサイトタグ（gtag.js）を使う場合。
方法 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> の先頭にグローバルサイトタグを配置します。

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

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

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

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

カスタムトラッカー設定

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

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

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

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

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

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

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

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

注:

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

スニペットのインストールに関するおすすめの設定

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

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

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

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

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

インストールに関する診断では、オプティマイズのインストール状況を確認できます。エクスペリエンスの情報パネルで [診断を実行] をクリックしてください。問題が検出された場合には、診断メッセージが表示されます。インストールに関する診断についての詳細
プレビューモードでは、エクスペリエンスを開始する前に、正しく表示されるかどうかを確認できます。プレビューモードについての詳細
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 つの変更箇所がハイライト表示されています。

&l=myNewName を <script> タグに追加
window.myNewName = window.myNewName || [];
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 に置き換えてください。

gtag.js デベロッパーガイド - Google developers
グローバルスニペットをインストールする - Google developers
アナリティクスのトラッキングを設定する - アナリティクスヘルプセンター
オプティマイズ用タグ設定ガイド - タグマネージャーヘルプセンター
アンチフリッカースニペット - オプティマイズデベロッパー

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

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

前提条件

方法を選択する

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

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

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

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

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

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