Optimizely 同期実装

Tealium では、すべてのタグを非同期で読み込むことをベストプラクティスとしています。

重要：Optimizely ツールは utag.sync.js を検出できません

執筆時点では、Optimizely のツールは、タグ管理システムを介して配信された同期スクリプトを検出できません。タグ管理システムがスクリプトを配信しているページでこのツールを実行すると、エラーメッセージが表示されます。Optimizely はこの問題の早期解決に取り組んでいます。それまでは、このエラーメッセージを無視しても問題ありません。Optimizely Synchronous がページ上で想定どおりに読み込まれているかどうかを確認するには、Ghostery ツールを使用することを推奨します。

utag.sync.js コンテナを使用した Optimizely Sync の読み込み（推奨）

この方法では、utag.js ファイルがページ上で非同期に読み込まれるよう実装されていることを前提としています。

ステップ1：utag.sync.js ファイルの生成を有効にする

1. 管理メニューで、Configure Publish Settingsをクリックします。Publish Configurationダイアログが表示されます。
2. Implementation項目まで下にスクロールし、Generate utag.sync.jsトグルを有効にします。
3. Saveをクリックして構成を適用します。

ステップ2：テストを実施するすべてのページに utag.sync.js スクリプトを追加する

スクリプトにアクセスする手順は次のとおりです。

1. 管理メニューで、Code Centerをクリックします。Code Centerダイアログが表示されます。
2. Code Centerダイアログの左側のパネルで、使用する環境を選択します。対応するコードが右側のパネルに表示されます。
3. Sample HTMLタブを選択し、utag.sync.js スクリプトをコピーします。
4. スクリプトをコピーし、ページの HTML の <head></head> セクションに追加します。

ステップ3：Optimizely のプロジェクト番号を構成する

1. 管理メニューで、Manage Templatesをクリックします。
2. テンプレートの一覧を展開し、**uTag Sync (Profile)**を選択します。
3. 以下のコードブロックをテキストエディターに貼り付けます。

document.write('<script type="text/javascript" src="//[cdn.optimizely.com/js/12345678.js](http://cdn.optimizely.com/js/12345678.js)"></scr'+'ipt>');

1. 12345678 を、Optimizely から提供されたプロジェクト番号に置き換えます。
2. Save Profile Templateをクリックし、テンプレートウィンドウを閉じます。

ステップ4：プロファイルを保存して公開する

これで、utag.sync.js ファイルは HTML の <head></head> 内に挿入されているため、ページの最上部で読み込まれます。これにより、ページ読み込みの非常に早い段階で Optimizely の JavaScript ファイルが同期的に読み込まれ、A/B テストも早期に開始されます。その後、ページ読み込みプロセスの後半で utag.js ファイルが読み込まれ、残りのタグが非同期で読み込まれます。