Optimizely 非同期タグ構成ガイド
Tealiumのベストプラクティスは、すべてのタグを非同期でロードすることです。この投稿では、Optimizelyを実装する際にTealiumのベストプラクティスに従う方法を説明します。
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>
- 詳細構成リストからWait Flag = Noを選択します。
- ロードルールタブに進み、デフォルトのすべてのページでロードルールを確認します。
- データマッピングタブに進み、データを送信したい先をマップします。詳細については、Data Mappingsを参照して、データソースをタグの宛先にマッピングする方法を学んでください。
非同期タグでEコマースデータを追跡する予定の場合、E-Commerce Extensionを使用してそのデータを自動的にマッピングすることをお勧めします。
宛先名 | 宛先変数 | 説明 | Eコマース拡張マッピング(推奨) |
---|---|---|---|
プロジェクトID | projectId |
Optimizelyによって提供されるプロジェクト識別子 | N/A |
注文ID | orderId |
注文に割り当てられた一意の識別子 | _corder 変数がこの宛先にマッピングされます |
収益(セント) | revenue |
注文の小計額(セント単位) | _csubtotal 変数がこの宛先にマッピングされます |
イベント名 | eventName |
変換イベントの名前/タイプ デフォルトイベントは purchase |
N/A |
ステップ3: プロファイルを保存/公開する。
重要: 非同期タグができるだけ早く発火するように、utag.js
ファイルをページの可能な限り上部にコード化することをお勧めします。HTML <body>タグの先頭にutag.jsを配置することを推奨します。TealiumはOptimizelyのJavaScriptファイルをロードし、残りの処理を行います。
方法2: Optimizelyをブロッキングタグとして実行
Optimizelyは通常、ページ上で「より早く」実行され、他のもの(例えば、あなたのアナリティクスツール)が実行される前にテストを決定するために、同期的に実行されることを好みます。しかし、Optimizelyが十分に早く実行され、それでも非同期である唯一の方法は、その.js
ライブラリを別の場所から提供することです。これにより、Optimizely非同期タグはブロッキングタグとなり、その後の非同期スクリプト(例えば、utag.10.js
)は、blocking Tagが完了するまでロードされません。
最新のものを使用していない場合は、utag.js
のバージョンをアップグレードしてください。詳細については、utag.jsリリースノートを参照してください。
- 上記のステップ#2を繰り返して、Optimizely非同期タグを追加して構成します。
- 詳細構成を下にドロップし、
.js
ライブラリの場所をカスタムスクリプトソースフィールドに入力します。 - 保存/公開プロファイルします。
以上です!いくつかの単純な違いがありますが、これによりOptimizelyファイルのロード方法とOptimizelyの後に他のタグがロードされる方法が劇的に変わります。
最終更新日 :: 2016年April月7日