at.js に関するよくある質問

at.js に関するよくある質問への回答を紹介します。

mbox.js と比較して at.js を使用するメリットは何ですか。

at.jsライブラリはmbox.jsを置き換えます。 mbox.jsライブラリはサポートされなくなりました。 ただし、ほとんどのユーザーにとって、at.js には mbox.js よりも優れた利点があります。

at.js のメリットの例として、Web 実装のページ読み込み時間の改善、セキュリティの強化、シングルページアプリケーション向けのより優れた実装オプションの提供があげられます。

次の図は、mbox.js と at.js を使用した場合のページ読み込みパフォーマンスを示しています。

上の図に示される通り、mbox.js を使用すると、Target の呼び出しが完了するまでページ内容が読み込まれません。at.js を使用すると、Target の呼び出しが開始するとページ内容が読み込まれ、呼び出しが完了するまで待ちません。

at.js および mbox.js はページ読み込み時間にどのように影響しますか?

特に新しいユーザーとリピートユーザーのコンテキストにおいて at.js と mbox.js がページ読み込み時間に与える影響を知りたいと考えているお客様やコンサルタントは数多くいます。残念ながら、at.js または mbox.js が各ページの読み込み時間にどのように影響するかはお客様の実装に左右されるので、具体的な数値を測定して示すことは困難です。

ただし、訪問者APIがページに存在する場合は、Targetがat.jsおよびmbox.jsがページ読み込み時間に与える影響をより深く理解できます。

メモ

訪問者 API と at.js または mbox.js は、(本文を非表示にする技術により)グローバル mbox を使用している場合にのみ、ページ読み込み時間に影響を与えます。リージョナル mbox は訪問者 API 統合の影響を受けません。

以降のセクションでは、新しい訪問者と再訪問者の一連のアクションについて説明します。

新しい訪問者

  1. 訪問者 API が読み込まれ、解析され、実行されます。

  2. at.js または mbox.js が読み込まれ、解析され、実行されます。

  3. グローバル mbox の自動作成が有効な場合、Target JavaScript ライブラリは次の操作を実行します。

    • Visitor オブジェクトをインスタンス化します。
    • Target ライブラリが、Experience Cloud 訪問者 ID データの取得を試みます。
    • この訪問者は新しいので、訪問者APIはdemdex.netに対するクロスドメインリクエストを実行します。
    • Experience Cloud 訪問者 ID データが取得された後、Target に対するリクエストが発行されます。

再訪問者

  1. 訪問者 API が読み込まれ、解析され、実行されます。

  2. at.js または mbox.js が読み込まれ、解析され、実行されます。

  3. グローバル mbox の自動作成が有効な場合、Target JavaScript ライブラリは次の操作を実行します。

    • Visitor オブジェクトをインスタンス化します。
    • Target ライブラリが、Experience Cloud 訪問者 ID データの取得を試みます。
    • 訪問者 API が、Cookie からデータを取得します。
    • Experience Cloud 訪問者 ID データが取得された後、Target に対するリクエストが発行されます。
メモ

新しい訪問者の場合、訪問者 API が存在すると、Target は、Target リクエストに Experience Cloud 訪問者 ID データが含まれていることを確認するために複数回やり取りをおこなう必要があります。再訪問者の場合、Target は、パーソナライズされたコンテンツを取得するためにのみ通信をおこないます。

at.js を旧バージョンから 1.0.0 にアップグレードした後、応答時間が長くなったように感じるのはなぜですか。

at.js バージョン 1.0.0 以降では、すべてのリクエストが同時並行で実行されます。旧バージョンではリクエストが順番に実行されます。そのため、Target では、リクエストをキューに入れ、最初のリクエストの処理が完了するまで待ってから次のリクエストに移ります。

この at.js の旧バージョンでのリクエストの実行方法では、いわゆる「ヘッドオブラインブロッキング」の問題が生じやすくなります。at.js 1.0.0 以降では、Target が同時並行でリクエストを実行するように変更されました。

at.js 0.9.1 で「ネットワーク」タブのウォーターフォールをチェックすると、 の現在のリクエストの処理が完了するまで、次のリクエストが実行されないことがわかります。Targetat.js 1.0.0以降では、基本的にすべてのリクエストが同時に開始される場合、このシーケンスは異なります。

応答時間の観点から、このシーケンスは、数学的には次のように合計できます

  • at.js 0.9.1:すべての Target リクエストの応答時間 = リクエストの応答時間の合計
  • at.js 1.0.0 以降:すべての Target リクエストの応答時間 = リクエストの応答時間の最大値

at.jsライブラリバージョン1.0.0では、リクエストがより高速に完了します。 また、at.js のリクエストは非同期なので、 によってページレンダリングがブロックされることはありません。Targetリクエストの完了に数秒を要した場合でも、レンダリングされたページが表示されます。TargetがTargetエッジから応答を受け取るまで、ページの一部のみが空白になります。

Targetライブラリを非同期で読み込むことはできますか?

at.js 1.0.0 リリースでは、Target ライブラリを非同期で読み込めるようになりました。

at.js を非同期で読み込む手順は次のとおりです。

  • 推奨されるアプローチはAdobe Experience Platform Launchです。 詳しくは、 Launchを使用したWebサイトでのExperience Cloudの実装のチュートリアルのAdobe Targetの追加を参照してください。

  • at.js を読み込むスクリプトタグに async 属性を追加することで、at.js を非同期で読み込むこともできます。次のように指定します。

    <script src="<URL to at.js>" async></script>
    
  • 次のコードでも、at.js を非同期で読み込むことができます。

    var script = document.createElement('script'); 
    script.async = true; 
    script.src = "<URL to at.js>"; 
    document.head.appendChild(script);
    

at.js を非同期で読み込む方法は、ブラウザーによるレンダリングのブロックを防ぐのに最適ですが、Web ページにちらつきが生じることがあります。

ページ(または指定された部分)を事前に非表示にし、at.jsとグローバルリクエストが読み込まれた後に表示するスニペットを使用することで、ちらつきを回避できます。 このスニペットは、at.js の読み込みの前に追加する必要があります。

非同期Launch実装を通じてat.jsをデプロイする場合は、Launch埋め込みコードの前に、『Launchチュートリアルを使用したWebサイトでのExperience Cloudの実装』の「Target事前非表示スニペットの追加」の節で説明されているように、事前非表示スニペットをページに直接含めてください。🔗

同期 DTM 実装を介して at.js を導入する場合、ページの最上部にあるページ型ルールを通して、スニペットを非表示にすることができます。

詳しくは、「at.js によるちらつきの制御方法」を参照してください。

at.jsはAdobe Experience Manager統合(Experience Manager)と互換性がありますか。

Adobe Experience Manager 6.2 と FP-11577(またはそれ以降)で、at.js 実装とその Adobe Target Cloud Services 統合をサポートします。

どうしたら at.js を使用してページ読み込み時のちらつきを回避できますか?

Target には、ページ読み込み時のちらつきを回避する方法がいくつか用意されています。詳しくは、「at.js によるちらつきの回避」を参照してください。

at.js のファイルサイズはどれくらいですか?

at.js ファイルはダウンロード時には約 109 KB あります。ただし、ほとんどのサーバーは自動的にファイルを圧縮してファイルのサイズを小さくするので、(GZIP またはその他の方法を使用して)サーバーで圧縮され、ユーザーが Web サイトを訪問した際に読み込まれる at.js は約 34 KB になります。at.js をインストールしたサーバーの圧縮設定により、実際の圧縮サイズが決まります。

at.js が mbox.js よりも大きいのはなぜですか?

at.js 実装が単一のライブラリ(at.js)を使用するのに対して、mbox.js 実装は、実際には 2 つのライブラリ(mbox.js および target.js)を使用します。そのため、より公平な比較は、at.js 対 mbox.js および target.js になります。2 つのバージョンの gzip 圧縮サイズを比較すると、at.js バージョン 1.2 は 34 KB で、mbox.js バージョン 63 は 26.2 KB です。

at.js がより大きいのは、mbox.js に比べて、より多くの DOM 解析をおこなうためです。at.js は JSON 応答で「生」データを取得し、その意味を理解する必要があるので、これが必要です。mbox.js は document.write() を使用し、すべての解析はブラウザーによって行われます。

より大きなファイルサイズにもかかわらず、アドビのテストでは、at.js のページの読み込みは mbox.js に比べて高速であることを示しています。また、at.jsは、追加のファイルを動的に読み込まず、document.writeを使用しないので、セキュリティの観点からも優れています。

at.js には jQuery が含まれていますか。既に Web ページに jQuery があるので、at.js のこの部分を削除できますか。

at.jsは、現在、jQueryの一部を使用しているので、at.jsの上部にMITライセンス通知が表示されます。 jQuery は、公開されておらず、バージョンが異なる可能性のある、既にページにある jQuery ライブラリに干渉しません。at.js 内の jQuery コードの削除は、サポートされていません。

at.js は、Safari とクロスドメインの「x のみ」の設定をサポートしますか。

いいえ。クロスドメインが「xのみ」に設定され、SafariがサードパーティのCookieを無効にしている場合、mbox.jsとat.jsの両方が無効なCookieを設定し、そのクライアントのドメインではmboxのリクエストは実行されません。

Safari の訪問者をサポートするには、「無効化」(ファーストパーティの cookie のみ設定)または「有効化」(Safari ではファーストパーティの cookie のみ設定、他のブラウザーではファーストパーティとサードパーティの cookie を設定)の方がクロスドメインの設定として優れています。

at.js と mbox.js を一緒に実行できますか。

同じページに配置できません。ただし、at.jsを実装およびテストする際は、at.jsを検証するまで、at.jsを一部のページで、mbox.jsを他のページで実行できます。

シングルページアプリケーションでTarget Visual Experience Composer(VEC)を使用できますか。

はい。at.js 2.xを使用している場合は、SPA用のVECを使用できます。詳しくは、「シングルページ(SPA)Visual Experience Composer」を参照してください。

Adobe Experience Cloud デバッガーを at.js の実装と一緒に使用できますか。

はい。また、mboxTrace をデバッグ目的で使用したり、ブラウザーの開発者ツールを使用して、ネットワーク要求を調査し、「mbox」にフィルターして mbox 呼び出しを分離することもできます。

at.js を使用した mbox 名に特殊文字を使用できますか。

はい、mbox.js の場合と同じです。

Web ページで mbox が実行されないのはなぜですか。

のお客様は、TargetTarget でクラウドベースのインスタンスを使用してテストをおこなったり、簡単な概念実証に利用したりする場合があります。これらのドメインは、他の多くのドメインと同様にパブリックサフィックスリストに含まれています。

これらのドメインを使用する場合は、targetGlobalSettings()を使用してcookieDomain設定をカスタマイズしない限り、最新のブラウザーではCookieが保存されません。 詳しくは、「Target でのクラウドベースのインスタンスの使用」を参照してください。

at.js を使用する際に、IP アドレスを Cookie ドメインとして使用することはできますか。

はい。at.js バージョン 1.2 以降では使用可能です。ただし、Adobeでは、常に最新バージョンを使用することを強くお勧めします。

メモ

次の例は、at.js バージョン 1.2 以降を使用する場合は不要です。

targetGlobalSettings の使用方法によっては、at.js をダウンロードした後にコードを追加修正する必要があります。例えば、様々な Web サイトで Target の実装にそれぞれ若干異なる設定が必要で、これらの設定をカスタム JavaScript により動的に定義することができない場合、ファイルをダウンロードした後、各 Web サイトにアップロードする前に、カスタマイズを手動でおこなってください。

次の例では、targetGlobalSettings() at.js 関数を使用して、IP アドレスをサポートするためのコードスニペットを挿入できます。

この例は単一の IP アドレス向けです。

if (window.location.hostname === '123.456.78.9') { 
    window.targetGlobalSettings = window.targetGlobalSettings || {}; 
    window.targetGlobalSettings.cookieDomain = window.location.hostname; 
}

この例は IP アドレスの範囲向けです。

if (/^123\.456\.78\..*/g.test(window.location.hostname)) { 
    window.targetGlobalSettings = window.targetGlobalSettings || {}; 
    window.targetGlobalSettings.cookieDomain = window.location.hostname; 
}

「アクションでセレクターが見つかりません」などの警告メッセージが表示されるのはなぜですか。

これらのメッセージはat.js機能とは関係ありません。 at.js ライブラリは、DOM 内で見つからないすべてのものを報告します。

この警告メッセージが表示された場合は、次のような原因が考えられます。

  • ページは動的に構築されており、at.jsが要素を見つけられない。

  • ネットワークが低速なのでページの構築に時間がかかり、at.jsがDOMでセレクターを見つけられない。

  • アクティビティが実行されているページの構造が変更されている。Visual Experience Composer(VEC)でアクティビティを再度開くと、警告メッセージが表示されます。必要な要素がすべて見つかるようにアクティビティを更新します。

  • 基になるページがシングルページアプリケーション(SPA)の一部であるか、ページの下部に表示される要素がページに含まれていて、at.js の「セレクターポーリングメカニズム」がこれらの要素を見つけることができない。selectorsPollingTimeout の値を増やすと問題が解決する場合があります。詳しくは、targetGlobalSettings() を参照してください。

  • いずれかのクリック追跡指標が、その指標が設定された URL に関係なく、それ自体をすべてのページに追加しようとしている。害はありませんが、この状況ではこれらのメッセージの多くが表示されます。

    最良の結果を得るには、at.js の最新バージョンをダウンロードして使用してください。詳しくは、「at.js のバージョンの詳細」および「at.js のダウンロード」を参照してください。

Targetサーバ呼び出しが送られるtt.omtrdc.netというドメインは何ですか。

tt.omtrdc.net は、Target のすべてのサーバー呼び出しを受信する Adobe の EDGE ネットワークの名前です。

at.js および mbox.js で HttpOnly および Secure の Cookie フラグが使用されないのはなぜですか?

HttpOnly はサーバー側コードでのみ設定できます。mbox などの Target Cookieは JavaScript コードで作成され保存されるので、Target では HttpOnly の Cookie フラグを使用できません。

Secure は、ページが HTTPS でロードされた場合にのみ、JavaScript で設定できます。ページが最初 HTTP でロードされる場合、JavaScript ではこのフラグを設定できません。また、Secureフラグを使用した場合、CookieはHTTPSページでのみ使用できます。

Target がユーザーを適切に追跡できるようにするために、および、Cookie が クライアント側で生成されるという理由で、Target ではこれらのフラグをどちらも使用しません。

at.js はどのくらいの頻度でネットワークリクエストを送信しますか?

Adobe Target は、すべての決定をサーバー側で実行します。つまり、at.js は、ページの再読み込みが発生するたび、または at.js パブリック API が呼び出されるたびに、ネットワークリクエストを送信します。

ベストケースのシナリオの場合、コンテンツの非表示、置換、表示に関連するページ読み込みの際に、ユーザーが何らかの目に見える効果に気付くことはないと考えてもよいですか?

at.jsは、HTML BODYやその他のDOM要素が事前に非表示になるのを長期間避けようとしますが、これはネットワークの状態やアクティビティの設定に依存します。 at.js 設定を使用すると、BODY を非表示にする CSS スタイルをカスタマイズして、HTML BODY 全体を非表示にする代わりに、ページの一部のみをあらかじめ非表示にできます。これらの部分には、「パーソナライズ」する必要のある DOM 要素が含まれていることが予想されます。

ユーザーがアクティビティの対象になる標準的なシナリオにおいてイベントはどのような順序で発生しますか?

at.js リクエストは非同期の XMLHttpRequest なので、次の手順が実行されます。

  1. ページが読み込まれます。
  2. at.js により、HTML BODY があらかじめ非表示にされます。HTML BODY の代わりに特定のコンテナをあらかじめ非表示にする設定もあります。
  3. at.js リクエストが送信されます。
  4. Target 応答が受信された後、Target が CSS セレクターを抽出します。
  5. CSS セレクターを使用して、Target が、カスタマイズする DOM 要素をあらかじめ非表示にするための STYLE タグを作成します。
  6. HTML BODY をあらかじめ非表示にする STYLE が削除されます。
  7. Target が DOM 要素のポーリングを開始します。
  8. DOM 要素が見つかった場合は、Target が DOM の変更を適用し、要素をあらかじめ非表示にする STYLE が削除されます。
  9. DOM要素が見つからない場合、グローバルタイムアウトを設定すると、ページが壊れないように要素が非表示になります。

アクティビティが変更している要素の非表示をat.jsで最終的に解除した後、そのページのコンテンツはどのくらいの頻度で完全に読み込まれて表示されますか?

上記のシナリオを考えると、アクティビティが変更している要素の非表示をat.jsが最終的に解除した後、そのページのコンテンツはどのくらいの頻度で完全に読み込まれて表示されますか? 言い換えると、そのページはアクティビティのコンテンツを除いて完全に表示され、その少し後にアクティビティのコンテンツが表示されます。

at.js は、ページのレンダリングをブロックしません。ユーザーは、Targetによってカスタマイズされた要素を表す、ページ上の空白の領域に気付く場合があります。 適用されるコンテンツに SCRIPT や IMG などのリモートアセットが多く含まれていない場合は、すべてが瞬時にレンダリングされます。

完全にキャッシュされたページは上記のシナリオにどのように影響しますか?ページ上の他のコンテンツが読み込まれた後は、アクティビティのコンテンツがよりはっきりと見えるようになるのですか?

ユーザーの場所から近くても Target Edge からは遠い CDN にページがキャッシュされている場合、そのユーザーは多少の遅延を感じる可能性があります。Targetエッジは世界中に適切に分散されているので、ほとんどの場合、これは問題になりません。

ヒーロー画像が表示された後に、少し遅れてスワップアウトされる可能性はありますか?

次のシナリオを考えてみましょう。

Target のタイムアウトは 5 秒です。ヒーロー画像をカスタマイズするアクティビティが存在するページをユーザーが読み込みます。適用するアクティビティがあるかどうかを確認するリクエストを at.js が送信したところ、初期応答がありません。関連付けられているアクティビティがあるかどうかに関する Target からの応答を受け取っていないので、このユーザーに対してはヒーロー画像の通常のコンテンツが表示されます。4 秒後、Target がアクティビティコンテンツと共に応答を返します。

この段階で代替バージョンが表示される可能性はありますか?つまり、4 秒後にヒーロー画像がスワップアウトされて、この画像のスワップにユーザーが気付く可能性はありますか?

最初は、画像ヒーロー DOM 要素は非表示になっています。Target からの応答を受信した後、at.js は、DOM の変更(IMG の置き換え、カスタマイズされたヒーロー画像の表示など)を適用します。

at.js にはどのような HTML の doctype が必要ですか?

a.js には HTML5 の doctype が必要です。

この構文は次のとおりです。

<!DOCTYPE html>

HTML5 の doctype を使用すると、ページが標準モードで読み込まれます。互換モードでロードする場合、at.js が依存する一部の JS API は無効になります。Targetは、互換モードで at.js を無効にします。

このページ