Adobe TargetをGlobal mboxとutag.sync.jsを使用して構成する | クライアントサイドタグ

開始する前に

この記事では、以下のトピックについての知識があることを前提としています：

概要

Adobe Targetには、コンテンツを変更するために使用できる2つの方法があります。

コンテンツが変更される正確な場所に地域のmboxesを配置します。
ページにGlobal mbox作成ステートメントを配置し、Adobe TnTインターフェース内で全てのロジックを定義し、どのコンテンツが変更されるかを決定します。

この投稿では、Global mboxアプローチの実装をレビューします。Global mboxアプローチは同期的な実装です。ベストプラクティスとして、リスクを軽減するためにすべてを非同期に保つことをお勧めします。要素を同期的にロードするリスクを理解してください。

この投稿で概説する方法を使用すると、Tealiumの実装を非同期に保ちつつ、Global mboxを同期的にロードすることができます。このソリューションは、Adobe Targetからのmbox.jsファイルの後期バージョンのいずれかを使用していることを前提としています。後期バージョンは、mboxDefaultクラスを自動的に作成しますが、mbox.jsの古いバージョンでは作成されません。

古いバージョンのmbox.jsを使用している場合でも、サポートは可能ですが、追加のステップが必要になります。詳細については、Legacy mbox.jsセクションを参照してください。

Publish Settingsでutag.sync.jsを有効にする

まず、適切な公開構成を有効にする必要があります：

管理メニューで、公開構成の構成をクリックします。公開構成ダイアログが表示されます。
Adobe Targetのフリッカーフリーサポート機能を有効にします。
これで、utag.sync.jsファイル内にロードしたいコードを貼り付けることができる追加のテンプレートがManage Templatesセクションに表示されます。

ページにutag.sync.jsをコードする

次に、utag.sync.jsファイルをページにコードする必要があります。このファイルは、ページの中に含めるべきであり、同期的に含める必要があります。Adobe Targetを使用するすべてのページにutag.sync.jsファイルが含まれていることを確認してください。

utag.sync.jsファイルを使用すると、このファイルにロードルールを割り当てることはできません。utag.sync.js内のコードの実行を停止する唯一の方法は、ファイル自体内の"if"ステートメントや他の条件を使用することです。

mbox.jsをダウンロードする

Adobeインターフェース内でキャンペーンとオファーを構成した後、mbox.jsファイルをダウンロードする必要があります。

mbox.jsファイルをローカルにホストする

mboxesを提供するすべてのホスト（ドメイン）でmbox.jsファイルを保存する必要があります。これは公開アクセス可能なファイルである必要があり、あなたのサイトからロードできるようにする必要があります。

utag.sync.jsを構成する

mbox.jsファイルをダウンロードしたら、ファイルを開き、その内容をコピーします。

Tealiumユーザーインターフェース内のutag.sync.jsファイル（uTag sync）のテンプレートを開きます。これは、画面の右上隅にあるあなたの名前をクリックし、テンプレートの管理を選択することで行います。表示されるドロップダウンから、uTag syncを選択します。

テンプレートに以下の内容をコピーして貼り付けます：

var mboxjs_location = "//path/to/mbox.js";
var global_mbox_name = "Global mbox name";
document.write('<script src="' + mboxjs_location + '"></script>');
document.write('<script type="text/javascript">mboxCreate("'+global_mbox_name+'")</script>');

最初の行は、mbox.jsファイルへのパスを追加する場所です。//path/to/mbox.jsを実際のパスに置き換えてください。

2行目は、Global mboxの名前を追加する場所です。Global mbox nameをGlobal mboxの名前に置き換えてください。

添付されているテキストファイルは、すべてを追加した後のサンプルutag.sync.jsテンプレートの見た目を示しています。

Legacy mbox.js

古いバージョンのmbox.jsファイルを使用している場合、mboxDefault要素を手動で作成する必要があります。これを行うためには、上記と同様のコードを使用します：

//Create mboxDefault
document.write('<div class="mboxDefault"></div>')

これは変更する必要はありません。なぜなら、これは単に以下のような見た目のmboxCreate関数よりも上にあるhead内のdiv要素を作成するだけだからです：

<div class="mboxDefault"></div>

このブロックは、document.writeで始まる2つの既存の行の間に配置する必要があります。

この方法を使用すると、utag.sync.jsファイルにはmbox.jsコードが含まれ、その後にこの他のコードブロックが続き、要素を作成し、その後にmboxCreate関数を呼び出すコードが続きます。これのサンプルは、添付されているSample utag.sync.js Legacy Templateファイルで見ることができます。

結論

これが構成されると、utag.sync.jsファイルがあなたのウェブサイトのheadに同期的にコード化されます。ページの本文には、主要なTealiumライブラリ（utag.js）ファイルが非同期でロードされます。

utag.sync.js内には、mbox.jsファイルが貼り付けられ、mboxCreate()を呼び出す小さなスニペット、または2つの小さなスニペットが追加されます。

utag.footer.jsは廃止され、もう選択肢ではありません。utag.footer.jsを使用している古い実装は以前と同様に機能し続けます。古いコンテンツ変更拡張のスコープを変更する必要はありません。元々’Footer’にスコープされていた古いコンテンツ変更拡張は、‘DOM Ready’にスコープされているように見え、utag.footer.jsファイルに引き続き公開されます。