Adobe Experience Platform Web SDK タグの構成ガイド

Adobe Experience Platform Web SDK（Adobe Alloy）は、Adobe Experience Cloudの顧客がAdobe Experience Platform Edge Networkを介してExperience Cloudのさまざまなサービスとやり取りするためのクライアントサイドのJavaScriptライブラリです。

タグのヒント

• マッピングを使用して標準の構成値を上書きし、カスタムパラメータを構成します。
• 複数のインスタンスを構成する場合は、各インスタンスに一意のDatastream IDとOrg IDを指定する必要があります。複数の値をコンマで区切って指定します。

動作原理

マッピング先はドット表記で表されます。最終的なAPIペイロードは、タグ内のドット表記に基づいてネストされた一連のJSONオブジェクトで構成されます。

Adobe Experience Platform Web SDKタグには、使用しているAdobeアプリケーションに固有の以下のマッピングが含まれており、XDMデータマッピングと非XDMデータマッピングが含まれています。XDMデータは、Adobe Experience Platform内で作成したスキーマと一致するコンテンツと構造を持つオブジェクトです。

• XDMイベントトリガー：特定のeventType値でイベントをトリガーするために使用します。
• イベント固有のパラメータ：特定のイベントのXDMおよび非XDM属性をマッピングするために使用します。
• Analytics XDMデータ：XDMオブジェクトに渡すデータをマッピングするために使用します。
• Targetデータ：Targetプロファイルを更新するための非XDM属性をデータオブジェクトにマッピングするために使用します。

AdobeにXDMおよび非XDMデータを送信する方法の詳細については、AdobeのドキュメントのTrack Eventsを参照してください。

イベントの例

Adobe Experience Platform Web SDKイベントを構成するには、イベントにマッピングされる変数を選択し、トリガーを指定します。変数が特定の値と等しい場合にイベントがトリガーされ、選択したイベント名がeventTypeとして渡されます。

ユースケース：XDMイベントトリガーを使用した購入イベント

購入イベントを構成するには、次の手順を実行します。

1. Adobe Experience Platform Web SDKタグのData Mappings画面に移動します。
2. 変数のドロップダウンリストからtealium_eventを選択し、Select a Destinationをクリックします。
3. CategoryセクションでXDM Event Triggersを選択します。
4. When mapped variable equalsフィールドをPurchaseに構成します。これは、tealium_eventが購入イベントをトリガーするために等しい必要がある値です。
5. Trigger eventドロップダウンリストでPurchases（sendEvent: Commerce Eventsセクションのcommerce.purchases）を選択します。これは、tealium_eventが購入イベントと等しい場合にトリガーされるイベントです。

ユースケース：イベント固有のパラメータを使用した購入イベント

既存のE-Commerce拡張マッピングに含まれていない購入イベントにデータを送信する必要がある場合は、イベント固有のパラメータを使用します。リストから属性を選択するか、カスタムな宛先を入力します。指定されたイベントと属性に対して特定のドット表記を使用することを確認してください。

次の例では、購入イベントと一緒にpurchaseOrderNumberをXDMデータとして渡します。

1. Adobe Experience Platform Web SDKタグのData Mappings画面に移動します。
2. 変数のドロップダウンリストからpo_number（または関連するクライアント固有のデータレイヤー要素）を選択し、Select a Destinationをクリックします。
3. CategoryセクションでEvent-specific Parametersを選択します。
4. purchaseOrderNumberはデフォルトの宛先の1つではないため、Custom Parameterを入力する必要があります。ParameterドロップダウンからCustomを選択し、宛先の完全なドット表記パスcommerce.purchases.xdm.commerce.order.purchaseOrderNumberを入力します。
5. For eventドロップダウンリストでイベントPurchasesを選択します。
6. パラメータを追加するには、Addをクリックします。

ユースケース：非XDMデータ/Adobe Targetデータ

非XDM、またはTargetデータは、イベントマッピングを使用して構成することもできます。このユースケースでは、Adobe Targetで使用するためにproduct_brandも送信します。

1. Adobe Experience Platform Web SDKタグのData Mappings画面に移動します。
2. 変数のドロップダウンリストからproduct_brandを選択し、Select a Destinationをクリックします。
3. CategoryセクションでTarget Dataを選択します。
4. マッピング先としてentity.brandを選択します。
5. Adobe Web SDKに送信される購入イベントには、ペイロードにdata.__adobe.target.entity.brandが含まれます。

以下の例は、E-Commerce拡張からのいくつかのデフォルトのマッピングを含むAdobe Web SDKの呼び出し結果を示しています。この例では、Adobeのドット表記がcommerce.purchases.xdm.commerce.order.purchaseOrderNumberのネストされたオブジェクトに分割される方法が示されています。

alloy("sendEvent",{
  "xdm":{
    "commerce":{
      "order":{
        "purchaseID":"123456789",
        "currencyCode":"USD",
        "priceTotal":39.98,
        "purchaseOrderNumer":"A1234"
      }
    },
    "productListItems":[
      {
        "SKU":"HT105",
        "name":"The Big Floppy Hat",
        "priceTotal":29.99,
        "quantity":1
      }
    ]
  },
  "data":{
    __adobe: {
      target: {
        "entity.brand": "Acme"
      }
    }
  }
});

Adobe Targetでのフリッカーの管理

Adobe Experience Platform Web SDKを非同期で読み込むと、以前に読み込まれたコンテンツがAdobe Targetによって更新されるため、コンテンツのフリッカーが発生する場合があります。フリッカーを最小限に抑えるために、Adobeではプリヒディングスニペットの追加を推奨しています。JavaScript拡張機能を使用して、このスニペットをutag.sync.jsテンプレートに追加します。

utag.sync.jsについての詳細については、AdobeのドキュメントのHow utag.sync.js worksを参照してください。

プリヒディングスニペットについての詳細については、AdobeのドキュメントのManage Flickerを参照してください。

Cookie管理ソリューションを使用した場合の空白ページエラー

Cookie管理ソリューション（CMS）を使用して、ユーザーがさまざまなCookieカテゴリに同意するまでタグがトリガーされないようにすると、プリヒディングスニペットが読み込まれ、タイムアウトするまで（3〜7秒）空白のページが表示されます。この動作の理由は、ユーザーが同意するまでAdobe Experience Platform Web SDKタグを読み込むことができないためです。

解決策は、同意が与えられたかどうかを確認し、同意に基づいてプリヒディングスニペットをトリガーするかどうかを決定することです。

Tealium外部のカスタムCMSを使用している場合は、同意のチェックをそのCMSプラットフォームを介して管理します。

Tealium JavaScript拡張機能を使用している場合は、関数がトリガーされるのは同意Cookieに特定の値が含まれている場合のみになるようにロジックを更新します。この値は、AEP Web SDKタグが属するCookieカテゴリ（たとえば、機能のCookieカテゴリ）に対するユーザーの同意を表す特定の値を含む必要があります。

例

この例では、CMSがmycms_cookieという名前のCookieを構成し、ユーザーが機能のCookieを受け入れた場合は値functional:1、すべてのCookieを受け入れた場合は値all:1を含むとします。

次のコードは、これらの値をチェックしてプリヒディングスニペットをトリガーするためのものです。

この例には、構成に合わせて変更する必要のあるコードの行にコメントがあります。

!function(e,a,n,t){
  if (a) return;
  //Cookieが存在するかどうかをチェックし、存在する場合はその値を取得します。mycms_cookieの部分は、CMSのCookieの実際の名前に置き換えてください。
  var cms_cookie_value = (document.cookie.match(/^(?:.*;)?\s*mycms_cookie\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
  if(cms_cookie_value){
    //受け入れられた値を配列に追加します。以下の例では、Cookieの値にはall:1またはfunctional:1が含まれている必要があります。
    var accepted_values = ['all:1','functional:1'];
    for(var i=0;i<accepted_values.length;i++){
      if(cms_cookie_value.includes(accepted_values[i])){
        var x=e.head;
        if(x){
          var o=e.createElement("style");
          o.id="alloy-prehiding";
          o.innerText=n;
          x.appendChild(o);
          setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t);
          return;
        }
      }
    }
  }
}

(document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);

"body { opacity: 0 !important }"のコードを対象とする要素（例：特定のdiv）に更新します。そうしない場合、コードのデフォルトの動作はコンテンツの全体を非表示にすることです。

Adobe Analyticsの移行ガイド

Adobe Analyticsタグは、Adobe Experience Platform Web SDKタグに置き換えられたレガシータグです。Adobe Experience Platform Web SDKタグは、Experience Data Model（XDM）をAdobe Analytics形式に変換してデータをAdobe Analyticsに送信します。

Adobe Experience Platform Web SDKタグは、レガシーの変数、プロパティ、およびイベントをサポートしています。

コードの比較

次の例は、Adobe AnalyticsとAdobe Experience Platform Web SDKの呼び出しの構造的な違いを示しています。

Adobe Analytics

// AppMeasurementライブラリを読み込む
var s = new AppMeasurement();
// レポートスイートIDを構成する
s.account = "example-rsid";
// ページ名を構成する
s.pageName = "ホームページ";
// 必要に応じて他の変数を構成する
s.prop1 = "value1";
s.eVar1 = "value2";
s.hellow = "value3";
// データをAdobe Analyticsサーバーに送信する
var s_code = s.t();
if (s_code) document.write(s_code);

Adobe Experience Platform Web SDK

window.alloy("sendEvent", {
    // イベントのタイプを構成する
    type: "viewStart",
    // Adobe Analyticsのデータを構成する
    xdm: {
      web: {
        webPageDetails: {
          // ページ名を構成する
          name: "ホームページ"
        }
      },
      _experience: {
        analytics: {
          customDimensions: {
            props: {
              prop1: "value1"
            },
            eVars: {
              eVar1: "value2"
            }
          }
        }
      },
    },
    data: {
      // 必要に応じて他の変数を構成する
      hellow: "value3",
    }
  });

Adobe AnalyticsタグをTealium Toolsを使用して移行する

Adobe Experience Platform Web SDK Migratorツールを使用すると、既存のAdobe Analytics AppMeasurementタグをAdobe Experience Platform Web SDKタグに移行できます。

Migratorツールを使用する前に、次の制限事項に注意してください。

• このツールはdoPluginsや拡張機能を移行しません。構成でdoPluginsや拡張機能を使用している場合は、これらを手動で移行する必要があります（詳細については、AdobeのドキュメントのMigrate events globallyセクションを参照してください）。
• link_nameおよびlink_trackvars変数はサポートされていません。
• products変数は、Adobeの仕様に従ってマッピングする前に、異なる属性に分割する必要があります。詳細については、Adobeのドキュメントのproductsを参照してください。
• ツールで自動的に移行されないイベントや属性は、空のマッピングになります。これらの空の属性を手動でマッピングするには、Adobe Analyticsタグを手動で移行するガイドを使用します。

Tealium Toolsを使用してAdobe Analyticsタグを移行するには、次の手順を実行します。

1. カスタムツールを追加するために、Tealium ToolsにAdobe Experience Platform Web SDK Migratorを追加します。カスタムツールの追加方法の詳細については、Manage Custom Toolsを参照してください。
2. iQ Tag Management > Tagsに移動し、Adobe Experience Platform Web SDK Migratorツールを起動します。
3. 移行の一環として既存のAdobe Analyticsタグを無効にするには、Disable existing tagを選択します。
4. 移行のスコープを選択します。
   • すべてのAppMeasurementタグ
   • すべてのアクティブなAppMeasurementタグ
   • 特定のAppMeasurementタグ（移行するタグのタグUIDを追加する必要があります）
5. Startをクリックします。
   Migratorツールは、既存のAdobe Analytics AppMeasurementタグを自動的にAdobe Experience Platform Web SDKタグに移行します。
6. プロファイルを保存して公開します。

構成でdoPluginsや拡張機能を使用している場合は、これらを手動で移行する必要があります（以下を参照）。

Adobe Analyticsタグを手動で移行する

Adobe AnalyticsタグからAdobe Experience Platform Web SDKタグに手動で移行するには、次の手順を実行します。

この移行ガイドでは、Adobe Analyticsタグの次のデータマッピングを使用します。

1. タグマーケットプレースに移動して、新しいAdobe Experience Platform Web SDKタグを追加します。詳細については、About tagsを参照してください。
2. Tealiumで次のタグ構成を構成します：
   • Tag Version：適切なタグバージョンを選択します。デフォルトは最新バージョンです。
   • Instance Name：SDKの名前空間です。デフォルトはalloyです。
   • Org ID：Adobeが割り当てたExperience Cloud組織IDです。たとえば、XXX@AdobeOrgです。
   • Edge Domain：Adobeサービスとのやり取りに使用されるドメインです。マッピングしたファーストパーティドメイン（CNAMEを使用）をAdobeが提供するドメインにマッピングした場合は、デフォルトの構成を更新します。
   • Datastream ID：Adobeが割り当てたデータストリームIDで、SDKを適切なアカウントと構成にリンクします。edgeConfigIdとも呼ばれます。
   • Debug Enabled：デバッグメッセージをブラウザのJavaScriptコンソールに表示するかどうかを構成します。
   • Edge Base Path：Adobeアカウントで構成されたものです。デフォルトはeeです。
   • Auto Pageview Tracking：すべてのページビューに対して自動的にweb.webpagedetails.pageViewsイベントを発火します。
   • Auto Purchase Tracking：注文IDが存在する場合に自動的にcommerce.purchasesイベントを発火します。

ロードルール

タグをすべてのページで読み込むか、タグの読み込み条件を構成します。詳細については、About load rulesを参照してください。

データマッピング

マッピングは、データレイヤーの変数からベンダータグの対応する宛先変数にデータを送信するプロセスです。詳細については、About data mappingsを参照してください。

利用可能なカテゴリは次のとおりです：

標準

データ収集

E-コマース

プライバシーオプション

パーソナライゼーションオプション

オーディエンスオプション

IDオプション