Optimizely 非同期タグ構成ガイド | クライアントサイドタグ

Optimizelyを同期的に実装するオプションについては、このPOSTをご覧ください。

Optimizely非同期タグを実装する方法は2つあります。サイトのコンテンツとテスト要件により、どのアプローチを使用するかが決まります。この記事に記載されている順番で2つの方法を試すことをお勧めします。

注意: 両方の方法は、utag.jsファイルがページ上で非同期にコード化されていることを前提としています。

方法1 (推奨): Optimizely非同期タグをバンドルし、すべてのページでロードする

この方法を推奨するのは、タグがページ内の他のもののロードをブロックしないからです。

ステップ1: すべてのページでロードされるタグのバンドル機能を有効にする。

管理メニューで、公開構成を構成するをクリックします。公開構成ダイアログが表示されます。
すべてのページでロードするタグをバンドルするトグルをONにします。これにより、タグがutag.jsと一緒にバンドルされ、ブラウザが行うネットワーク呼び出しの数が減少します。

ステップ2: Optimizely非同期タグを追加し、構成する

このタグはTealiumのタグマーケットプレイスにあります。これは、多数のベンダータグが揃っている場所です。詳しくは、Tag Marketplaceを参照して、Tealium iQプロファイルにタグを追加する方法を学んでください。

/ja/iq-tag-management/tags/manage/

構成する手順は以下の通りです：

プロジェクトIDを入力します。これは、Optimizelyが送信するスクリプトタグの末尾の数字です。
例えば： <script src="//cdn.optimizely.com/js/123456789.js"></script>
Advanced SettingsリストからWait Flag = Noを選択します。
Load Rulesタブに進み、デフォルトのLoad on All Pagesルールをチェックします。
Data Mappingsタブに進み、データを送信したい先をマップします。詳しくは、Data Mappingsを参照して、データソースをタグの先にマップする方法を学んでください。

非同期タグでE-Commerceデータを追跡する予定の場合、そのデータを自動的にマップするためにE-Commerce Extensionを使用することをお勧めします。

Destination Name	Destination Variable	Description	E-Commerce Extension Mapping (推奨)
Project ID	`projectId`	Optimizelyによって提供されるプロジェクト識別子	N/A
Order ID	`orderId`	注文に割り当てられた一意の識別子	`_corder`変数がこの先にマップされます
Revenue in Cents	`revenue`	注文の小計金額（セント単位）	`_csubtotal`変数がこの先にマップされます
Event Name	`eventName`	コンバージョンイベントの名前/タイプデフォルトのイベントは`purchase`	N/A

ステップ3: プロファイルを保存/公開する。

重要: 非同期タグができるだけ早く発火するように、utag.jsファイルがページ内で可能な限り高い位置にコード化されていることを確認してください。utag.jsをHTMLの<body>タグの上部に配置することをお勧めします。TealiumはOptimizelyのJavaScriptファイルをロードし、残りの部分を処理します。

方法2: Optimizelyをブロッキングタグとして実行する

Optimizelyは通常、ページ上で同期的に実行されることを好みます。これにより、他のもの（例えば、あなたの分析ツール）が実行される前にテストを決定することができます。しかし、Optimizelyが十分に早く実行され、それでも非同期である唯一の方法は、その.jsライブラリを別の場所から提供することです。これにより、Optimizely非同期タグはブロッキングタグとなり、その後の非同期スクリプト（例えば、utag.10.js）は、blocking Tagが完了するまでロードされません。

まだ最新版を使用していない場合は、utag.jsのバージョンをアップグレードしてください。詳細については、utag.js Release Notesを参照してください。

上記のステップ＃2を繰り返して、Optimizely非同期タグを追加し、構成します。
Advanced Settingsを展開し、Custom Script Sourceフィールドに.jsライブラリの場所を入力します。
プロファイルを保存/公開します。

以上です！いくつかの簡単な違いがありますが、これによりOptimizelyファイルがロードされる方法と、Optimizelyの後に他のタグがロードされる方法が大きく変わります。