オプティマイズの導入

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

オプティマイズ テストを実施するには、ウェブサイトにオプティマイズ スニペットを追加します。メインのオプティマイズ スニペットは、既存の Google アナリティクス トラッキング コードに追加するコード行です。このコード行は、指定したオプティマイズ テスト コンテナを Google アナリティクス プラグインとして読み込みます。ページを非表示にするスニペットを追加すると、接続速度が遅い場合のページ フリッカーやタイムアウトのリスクを低減することができます。

アナリティクスの導入方法

オプティマイズの導入方法は、アナリティクスの導入方法によって異なります。ご自身の設定に最も適したオプションを次の中から選択してください。
 
アナリティクスで単純なインストール方法を採用しており、Google タグマネージャなどのタグ管理システム(TMS)を使用していない一般的なユーザーは、この記事の手順でオプティマイズを導入してください。
 
TMS でアナリティクスを導入している上級ユーザーには、次の 2 つのオプションがあります。
 
  1. テストを最も効率よく実施するには、オプティマイズをページに直接導入します。詳細
  2. 効率は少し低下しますが、柔軟な設定が可能な Google タグマネージャを使用してオプティマイズを導入することもできます。詳細
この記事の内容:

前提条件

  1. オプティマイズを設定するの手順を完了済み
  2. ユニバーサル アナリティクス(analytics.js)をウェブサイトにインストール済み
  3. ウェブサイトを変更するためのアクセス権
  4. 基本的な HTML 編集の経験

オプティマイズ スニペットを取得する

オプティマイズの導入には、タグ管理ソリューションを使うのではなく、既存の Google アナリティクス トラッキング コードをウェブサイトに直接追加することをおすすめします。

オプティマイズ スニペットを取得するには:

  1. [ウェブテスト] ページに移動します。
  2. コンテナ情報パネル(ページの右側)を見つけます。
  3. [オプティマイズ スニペットのインストール] をクリックします。
  4. 青色の [スニペットを表示] ボタンをクリックします。
  5. 画面の手順に沿って操作します。

スニペット ダイアログには、変更済みアナリティクス トラッキング コードとページを非表示にするスニペット(省略可)が含まれており、オプティマイズのコンテナ ID でカスタマイズされています。両方のスニペットをテストするウェブページに導入できます。

ステップ 1: 変更済みアナリティクス トラッキング コードを導入する

ウェブサイトでのテストを開始するには、変更済みアナリティクス トラッキング コードをページの HTML コードに追加します。コードをすべてのウェブページに追加することも、テストを実施するページにだけ追加することも可能です。

オプティマイズを導入するには、変更済みアナリティクス トラッキング コードをオプティマイズのダイアログ ボックスからコピーして、<HEAD> のできるだけ近く、テストで使用されない他のトラッキング スクリプトの前に配置します。

スニペットの順序について詳しくは、後述をご覧ください。

ステップ 2: ページを非表示にするスニペットを設定する

変更済みアナリティクス トラッキング コードに加えて、ページを非表示にするスニペットもインストールすることをおすすめします。それにより、ページ フリッカーのリスクを大幅に抑えることができます。設定したタイムアウト時間内にオプティマイズ コンテナが読み込まれた場合にのみテストパターンを表示するため、接続速度の遅いユーザーにも快適なエクスペリエンスを提供できます。

タイムアウト値の変更など、ページを非表示にするスニペットのカスタマイズについて詳しくは、ページを非表示にするスニペットについての記事をご覧ください。

タグ配置のおすすめの設定

オプティマイズ コード スニペットの配置順序は重要です。一般に、タグの順序は次のとおりです。

  1. オプティマイズ テストで使用する JavaScript コード(例: jQuery)。できるだけ短くしてください。
  2. ターゲティングに必要な変数(データレイヤー、JavaScript、Cookie など)の初期化。
  3. ページを非表示にするスニペット。
  4. オプティマイズ プラグインを設定したアナリティクスのトラッキング コード。
  5. タグマネージャのコンテナ スニペット。
  6. その他の JavaScript、トラッカー、広告タグ。

ウェブページにコードを追加する際のおすすめの方法は次のとおりです。

  1. ページを非表示にするスニペットは、変更済みアナリティクス トラッキング コードの直前(<meta charset> 宣言の後)に配置します。
  2. Google アナリティクス トラッキング コード<HEAD> の方に移動します(その場所にない場合)。可能であれば、ページを非表示にするスニペットの直後に配置します。
  3. 次は、変更済みのアナリティクス トラッキング コードのに配置します。
    • <meta charset>
    • データレイヤーの初期化
    • Cookie の設定
    • オプティマイズ テストで使用するスクリプトや、オプティマイズ テストで使用する JavaScript 変数を宣言するスクリプト。たとえば、オプティマイズ パターンをターゲティングするために使用される jQuery と JavaScript
    • ページを非表示にするスニペット
  4. 次は、変更済みアナリティクス トラッキング コードのに配置します。
    • その他のトラッカー、アナリティクス タグ、広告タグ。タグ管理システムによって導入されたタグ
    • オプティマイズ テストでターゲティングしない他のスクリプト

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

Example: Modified Analytics tracking code

The Optimize plugin is a single line of code, containing your Optimize container ID, that looks like this:

ga('require', 'GTM-XXXXXX');

When added to your Analytics tracking code the modified code looks like this:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', 'auto');
  ga('require', 'GTM-XXXXXX');
  ga('send', 'pageview');

</script>

Note: Replace GTM-XXXXXXX with your Optimize container ID, and UA-XXXXXXX-X with your Analytics tracking ID.

Example: Modified Analytics tracking code with anti-flicker

The following is an example of an HTML page with anti-flicker snippet and the modified Analytics tracking code:

<HTML>
<HEAD>
<!-- Anti-flicker snippet (recommended)  -->
<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','dataLayer',4000,
{'GTM-XXXXXX':true});</script>
<!-- Modified Analytics tracking code with Optimize plugin -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('require', 'GTM-XXXXXX');
    ga('send', 'pageview');
    </script>

Note: Replace GTM-XXXXXX with your Optimize container ID and replace UA-XXXXXXXX-X with your Analytics tracking ID.

次のステップ

変更済みアナリティクス トラッキング コードをウェブページに導入したら、A/BリダイレクトMVT の各テストを作成できるようになります。

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