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

Adobe Experience Platform Web SDK（Adobe Alloy）は、Adobe Experience CloudのユーザーがAdobe Experience Platform Edge Networkを介してExperience Cloudの各種サービスと連携できるようにする、クライアント側のJavaScriptライブラリです。

タグ構成のヒント

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

仕組み

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

Adobe Experience Platform Web SDKタグには、使用するAdobeアプリケーションに固有の次のマッピングが含まれており、XDMデータおよび非XDMデータのマッピングに対応しています。XDMデータは、その内容と構造がAdobe Experience Platform内で作成したスキーマと一致するオブジェクトです。

• XDMイベントトリガー：特定のeventType値を持つイベントをトリガーするために使用します。
• イベント固有のパラメータ：特定のイベントについて、XDM属性と非XDM属性の両方をマッピングするために使用します。
• Analytics XDMデータ：XDMオブジェクトで渡すデータをマッピングするために使用します。
• Targetデータ：Targetプロファイルの更新やTarget Recommendations属性の送信のために、データオブジェクトで渡す非XDM属性をマッピングするために使用します。

AdobeへのXDMデータおよび非XDMデータの送信について詳しくは、Adobeドキュメントのイベントのトラッキングを参照してください。

イベントの例

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

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

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

1. Adobe Experience Platform Web SDKタグ構成のデータマッピング画面に移動します。
2. 変数のドロップダウンリストからtealium_eventを選択し、マッピング先を選択をクリックします。
3. カテゴリセクションで、XDMイベントトリガーを選択します。
4. マッピングされた変数が次と等しい場合フィールドを購入に構成します。これは、購入をトリガーするためにtealium_eventと一致する必要がある値です。
5. イベントをトリガードロップダウンリストで、sendEvent：コマースイベントセクションの購入(commerce.purchases)を選択します。これは、tealium_eventが購入イベントと等しい場合にトリガーされるイベントです。

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

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

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

1. Adobe Experience Platform Web SDKタグ構成のデータマッピング画面に移動します。
2. 変数のドロップダウンリストからpo_number（または該当するクライアント固有のデータレイヤー要素）を選択し、マッピング先を選択をクリックします。
3. カテゴリセクションで、イベント固有のパラメータを選択します。
4. purchaseOrderNumberはデフォルトのマッピング先に含まれていないため、カスタムパラメータを入力する必要があります。パラメータドロップダウンからカスタムを選択し、マッピング先の完全なドット表記パスcommerce.purchases.xdm.commerce.order.purchaseOrderNumberを入力します。
5. 対象イベントドロップダウンリストで、購入イベントを選択します。
6. 追加をクリックしてパラメータを追加します。

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

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

1. Adobe Experience Platform Web SDKタグ構成のデータマッピング画面に移動します。
2. 変数のドロップダウンリストからproduct_brandを選択し、マッピング先を選択をクリックします。
3. カテゴリセクションで、Targetデータを選択します。
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について詳しくは、utag.sync.jsの仕組みを参照してください。

事前非表示スニペットについては、フリッカーの管理を参照してください。

Cookie管理ソリューション使用時の空白ページエラー

ユーザーが各Cookieカテゴリに同意するまでタグがトリガーされないようにCookie管理ソリューション（CMS）を使用している場合、事前非表示スニペットが読み込まれ、タイムアウトするまで（3～7秒間）空白ページが表示されます。この動作が発生するのは、ユーザーが同意するまでAdobe Experience Platform Web SDKタグを読み込めないためです。

この問題を解決するには、同意が得られているかどうかを確認し、その結果に基づいて事前非表示スニペットをトリガーするかどうかを決定します。

Tealium以外のカスタムCMSを使用している場合は、そのCMSプラットフォームを通じて同意の確認を管理します。

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

例

この例では、CMS は mycms_cookie という名前の Cookie を構成します。この Cookie には、ユーザーが機能 Cookie の使用を許可した場合は functional:1、すべての Cookie を許可した場合は all:1 という値が格納されます。

次のコードでは、これらの値を確認してプリハイディングスニペットを実行します。

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

!function(e,a,n,t){
  if (a) return;
  //Check if the cookie exists, and if it does, get its value. Update the mycms_cookie bit with the actual name of your CMS's cookie.
  var cms_cookie_value = (document.cookie.match(/^(?:.*;)?\s*mycms_cookie\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
  if(cms_cookie_value){
    //Add the accepted values to an array. In the example below, the cookie value must contain either all:1 or functional:1 to trigger the prehidding snippet.     
    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 など、対象とする要素に置き換えます。置き換えない場合、コードのデフォルトの動作ではコンテンツの body 全体が非表示になります。

Adobe Analytics 移行ガイド

Adobe Analytics タグは、Adobe Experience Platform Web SDK タグに置き換えられたレガシータグです。Adobe Experience Platform Web SDK タグは、エクスペリエンスデータモデル（XDM）を Adobe Analytics 形式に変換して、Adobe Analytics にデータを送信します。

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

コードの比較

次の例は、Adobe Analytics と Adobe Experience Platform Web SDK の呼び出しにおける構造上の違いを示しています。

Adobe Analytics

// Load the AppMeasurement library
var s = new AppMeasurement();
// Set the report suite ID
s.account = "example-rsid";
// Set the page name
s.pageName = "Home Page";
// Set other variables as needed
s.prop1 = "value1";
s.eVar1 = "value2";
s.hellow = "value3";
// Send the data to Adobe Analytics servers
var s_code = s.t();
if (s_code) document.write(s_code);

Adobe Experience Platform Web SDK

window.alloy("sendEvent", {
    // Set the type of event
    type: "viewStart",
    // Set the data for Adobe Analytics
    xdm: {
      web: {
        webPageDetails: {
          // Set the page name
          name: "Home Page"
        }
      },
      _experience: {
        analytics: {
          customDimensions: {
            props: {
              prop1: "value1"
            },
            eVars: {
              eVar1: "value2"
            }
          }
        }
      },
    },
    data: {
      // Set other variables as needed
      hellow: "value3",
    }
  });

Tealium Tools を使用した Adobe Analytics タグの移行

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

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

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

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

1. 次の URL にある JSON 定義を使用して、Adobe Experience Platform Web SDK Migrator を Tealium Tools に追加します：https://solutions.tealium.net/hosted/tealiumTools/aep_migrate/aep_migrate.json。カスタムツールの追加について詳しくは、「カスタムツールの管理」を参照してください。
2. タグ管理／タグに移動し、Adobe Experience Platform Web SDK Migrator ツールを起動します。
3. 移行の一環として既存の Adobe Analytics タグを無効にするには、既存のタグを無効にするを選択します。
4. 移行の範囲を選択します。
   • すべての AppMeasurement タグ
   • すべてのアクティブな AppMeasurement タグ
   • 特定の AppMeasurement タグ（移行するタグのタグ UID を追加する必要があります。）
5. 開始をクリックします。
   Migrator ツールによって、既存の Adobe Analytics AppMeasurement タグが Adobe Experience Platform Web SDK タグに自動的に移行されます。
6. プロファイルを保存してパブリッシュします。

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

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

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

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

1. タグマーケットプレイスに移動し、新しいタグを追加します。詳細については、タグについてを参照してください。
2. Tealiumで次のタグ構成を構成します。
   • Org ID：Adobeから割り当てられたExperience Cloud組織ID。例：XXX@AdobeOrg。
   • Datastream ID：SDKを適切なアカウントおよび構成にリンクする、Adobeから割り当てられたデータストリームID。edgeConfigIdとも呼ばれます。
3. Adobe Experience Platformで次の構成を構成します。
   1. Datastreamsに移動し、移行で使用するデータストリームを選択します。
   2. データストリームのConfigure画面で、そのデータストリームに使用されているEvent Schemaを確認し、Saveをクリックします。

      

   3. データストリームの詳細画面で、Adobe Analyticsサービスが有効になっていることを確認し、そのサービスを選択します。

      

   4. Adobe Analytics service画面で、適切なデータストアを参照するAdobeのReport Suite IDを入力します。

      

   5. Data Management > Schemasに移動し、データストリームにリンクされているEvent Schemaを選択します。
   6. Field GroupsにAdobe Analytics ExperienceEvent Templateフィールドグループが含まれていることを確認します。

      

4. この例では、次の従来の属性、プロパティ、イベントをTealiumのAdobe Experience Platform Web SDKタグにマッピングします。詳細については、データマッピングについてを参照してください。
   1. Adobe Experience Platform Web SDKタグで、Data Mappingsに移動します。
   2. sf (js)変数を選択してAnalytics eVars > evar181にマッピングし、Doneをクリックします。
   3. page_category (js)変数を選択してAnalytics Props > prop5にマッピングし、Doneをクリックします。
   4. medallia_custom_event(js)変数とXDM Event Triggerを選択します。次の値を使用してマッピングを構成し、Doneをクリックします。
      • カスタム宛先としてMDigital_Invite_Displayed:_experience.analytics.event101to200を追加します。
      • マッピングされた変数が次と等しい場合：MDigital_Invite_Displayed
      • トリガーイベント：Experience Analytics Events 101-200 (_experience.analytics.event101to200)
      • カスタムイベント名：200
   5. **page_category (js)**変数を選択し、次の値を使用してマッピングを構成してから、Doneをクリックします。
      • カスタム宛先としてxdm._experience.analytics.customDimensionとdata.channelを追加します。
      • Non-XDM/Custom Schemaに移動し、Non-XDM/Custom Schema Pathにchannelと入力します。
5. Finishをクリックします。
6. Adobe Analyticsタグを無効にします。
7. 保存してパブリッシュします。

Adobe Experience Platformのデータストリーム、サービス、スキーマの構成について詳しくは、Adobeドキュメントの次の記事を参照してください。

• データストリームの構成
• UIでのスキーマの作成と編集
• Adobe Analyticsの構成

タグの構成

タグマーケットプレイスに移動し、新しいタグを追加します。詳細については、タグについてを参照してください。

タグを追加するときは、次の構成を構成します。

• Tag Version：適切なタグバージョンを選択します。デフォルトは最新バージョンです。
• Instance Name：SDKの名前空間。デフォルトはalloyです。
• Org ID：Adobeから割り当てられたExperience Cloud組織ID。例：XXX@AdobeOrg。
• Edge Domain：Adobeサービスとの通信に使用するドメイン。ファーストパーティドメインのいずれかをAdobeがプロビジョニングしたドメインに（CNAMEを使用して）マッピングしている場合は、デフォルト構成を更新します。
• Datastream ID：SDKを適切なアカウントおよび構成にリンクする、Adobeから割り当てられたデータストリームID。edgeConfigIdとも呼ばれます。
• Debug Enabled：ブラウザーのJavaScriptコンソールにデバッグメッセージを表示できるようにします。
• Edge Base Path：Adobeアカウントで構成されます。デフォルトはeeです。
• Auto Pageview Tracking：ページビューごとにweb.webpagedetails.pageViewsイベントを自動的に発生させます。
• Auto Purchase Tracking：注文IDが存在する場合にcommerce.purchasesイベントを自動的に発生させます。

ロードルール

すべてのページでタグをロードするか、タグをロードする条件を構成します。詳細については、ロードルールについてを参照してください。

データマッピング

データマッピングは、データレイヤー変数の値をベンダータグ内の対応する変数に送信します。詳細については、データマッピングについてを参照してください。

使用可能なカテゴリーは次のとおりです。

標準

データ収集

ストリーミングメディア

E コマース

プライバシーオプション

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

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

ID オプション

identityMap パラメーター

データストリームの上書き

XDM イベントトリガー

Analytics XDM データ

Targetデータ（非XDM、データオブジェクト）

Analytics eVar

このコネクタは、eVar1～eVar250の直接マッピングをサポートしています。たとえば、マッピング先は_experience.analytics.customDimensions.eVars.eVar1-250に展開されます。

Analytics Prop

このコネクタは、prop1～prop75の直接マッピングをサポートしています。たとえば、マッピング先は_experience.analytics.customDimensions.props.prop1-75に展開されます。

XDM（レガシー）

Adobe Audience Manager構成（レガシー）