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属性をマッピングするために使用します。
• アナリティクスXDMデータ：XDMオブジェクトに渡すデータをマッピングするために使用します。
• ターゲットデータ：ターゲットプロファイルを更新するためにデータオブジェクトに渡す非XDM属性をマッピングするために使用します。

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

イベント例

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

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

購入イベントを構成するには：

1. Adobe Experience Platform Web SDKタグ構成のデータマッピング画面に移動します。
2. 変数ドロップダウンリストからtealium_eventを選択し、送信先を選択をクリックします。
3. カテゴリセクションでXDMイベントトリガーを選択します。
4. マップされた変数が等しい場合フィールドにPurchaseを構成します。これはtealium_eventが購入をトリガーするために等しくなければならない値です。
5. トリガーイベントドロップダウンリストで、sendEvent: Commerce Eventsセクションの下にあるPurchases (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. イベントのためにドロップダウンリストからPurchasesイベントを選択します。
6. 追加をクリックしてパラメータを追加します

使用例：非XDMデータ/Adobe Targetデータ

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

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

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

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はprehidingスニペットの追加を推奨しています。このスニペットをutag.sync.jsテンプレートにJavaScript拡張として追加します。

utag.sync.jsの詳細については、How utag.sync.js worksを参照してください。

prehidingスニペットについての情報は、Manage Flickerを参照してください。

Cookie Management Solutionを使用している場合の空白ページエラー

タグがトリガーされる前にユーザーが異なるクッキーカテゴリに同意するまで待つようにCookie Management Solution（CMS）を使用している場合、prehidingスニペットが読み込まれ、タイムアウトするまで（3-7秒）ページが空白のままになります。この挙動の理由は、ユーザーが同意を受け入れるまでAdobe Experience Platform Web SDKタグを読み込むことができないためです。

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

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

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

例

この例では、CMSはmycms_cookieというクッキーを構成し、ユーザーが機能クッキーの使用を承諾した場合はfunctional:1、すべてのクッキーの使用を承諾した場合はall:1という値を含みます。

以下のコードは、これらの値をチェックして、プリハイディングスニペットをトリガーします。

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

!function(e,a,n,t){
  if (a) return;
  //クッキーが存在するかチェックし、存在する場合はその値を取得します。mycms_cookie部分をCMSのクッキーの実際の名前に更新してください。
  var cms_cookie_value = (document.cookie.match(/^(?:.*;)?\s*mycms_cookie\s*=\s*([^;]+)(?:.*)?$/)||[,null])[1];
  if(cms_cookie_value){
    //受け入れられた値を配列に追加します。以下の例では、クッキーの値に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 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 = "Home Page";
// 必要に応じて他の変数を構成
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: "Home Page"
        }
      },
      _experience: {
        analytics: {
          customDimensions: {
            props: {
              prop1: "value1"
            },
            eVars: {
              eVar1: "value2"
            }
          }
        }
      },
    },
    data: {
      // 必要に応じて他の変数を構成
      hellow: "value3",
    }
  });

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

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 Experience Platform Web SDKタグで手動でマッピングできるように異なる属性に分割する必要があります。詳細については、Adobeのドキュメントのproductsを参照してください。
• ツールで自動的に移行されないイベントや属性は、空のマッピングになります。これらの空の属性は、Migrate the Adobe Analytics tag manuallyガイドを使用して手動でマッピングできます。

Adobe AnalyticsタグをTealium Toolsを使用して移行するには、次の手順を完了してください：

1. 次のURLでJSON定義を使用してTealium ToolsにAdobe Experience Platform Web SDK Migratorを追加します：https://solutions.tealium.net/hosted/tealiumTools/aep_migrate/aep_migrate.json。カスタムツールを追加する方法の詳細については、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タグを追加します。詳細については、タグについてを参照してください。
2. Tealiumで以下のタグ構成を構成します：
   • Org ID: Adobeに割り当てられたExperience Cloud組織ID。例：XXX@AdobeOrg。
   • Datastream ID: Adobeに割り当てられたdatastream IDで、SDKを適切なアカウントと構成にリンクします。edgeConfigIdとも呼ばれます。
3. Adobe Experience Platformで以下の構成を構成します：
   1. Datastreamsにアクセスし、移行で使用するdatastreamを選択します。
   2. DatastreamのConfigure画面で、datastreamで使用されるEvent Schemaをメモし、Saveをクリックします。

      

   3. Datastreamの詳細画面で、Adobe Analyticsサービスが有効であることを確認し、サービスを選択します。

      

   4. Adobe Analyticsサービス画面で、適切なデータストアを指すAdobe Report Suite IDを入力します。

      

   5. Data Management > Schemasにアクセスし、datastreamにリンクされた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 Datastream、サービス、スキーマの構成についての詳細は、Adobeのドキュメントの以下の記事を参照してください：

• Datastreamの構成
• UIでスキーマを作成および編集する
• Adobe Analyticsの構成

タグ構成

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

タグを追加する際には、以下の構成を構成します：

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

ロードルール

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

データマッピング

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

利用可能なカテゴリは以下の通りです：

標準

データ収集

ストリーミングメディア

Eコマース

プライバシーオプション

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

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

アイデンティティオプション

identityMapパラメータ

Datastreamオーバーライド

XDMイベントトリガー

Analytics XDM データ

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

アナリティクス eVars

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

アナリティクス Props

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

XDM (レガシー)

Adobe Audience Manager Config (レガシー)