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> - 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の後に他のタグがロードされる方法が大きく変わります。
最終更新日 :: 2016年April月7日