ドキュメントExperience PlatformWeb SDK ガイド

Experience Platform Web SDK での Adobe Journey Optimizer の使用

最終更新日: 2025年5月5日
  • トピック:

作成対象:

  • 開発者

Adobe Experience Platform Web SDK は、web チャネルに Adobe Journey Optimizer して管理され、パーソナライズされたエクスペリエンスを配信およびレンダリングできます。 WYSIWYG エディター(Adobe Journey OptimizerWeb チャネル 、非ビジュアルインターフェイスコードベースのエクスペリエンスチャネル を使用して、Journey Optimizer Web しいキャンペーンとパーソナライゼーションエクスペリエンスを作成、アクティベートおよび配信でます。

IMPORTANT
エクスペリエンスのオーサリングとレポートの概要については 🔗Adobe Journey Optimizer web チャネルのドキュメ Journey Optimizer Web トをお読みください。

用語

サーフェス:Web サーフェスは、Adobe Journey Optimizer エクスペリエンスコンテンツが配信される Web ページまたはページ上の場所を URI で特定したものです。

提案:Adobe Journey Optimizer では、提案は、Journey Optimizer Campaign ールから選択されたエクスペリエンスに関連付けられます。

Adobe Journey Optimizer の有効化

Adobe Journey Optimizer の使用を開始するには、次の手順に従います。

  1. Adobe Journey Optimizer の web エクスペリエンスガイドから 前提条件を確認します。具体的には次のとおりです。

    • Adobe Experience Cloud Visual Editing Helper を設定します。
    • データストリームで Adobe Journey Optimizer を有効にします。
    • 「Edge上でアクティブ化結合ポリシー ​」オプションを有効にします。
  2. イベントに「renderDecisions」オプションを追加します。 Web ページサーフェス上に配信されたJourney Optimizer コンテンツの提案を自動レンダリングするには、renderDecisions を true に設定します。

    alloy("sendEvent", {
        ...,
        "renderDecisions": true
    })
    
  3. オプションで、イベントに追加のサーフェスを指定します。 デフォルトでは、Web SDKは現在の web ページの web サーフェスを自動的に生成し、Edge Networkに対するリクエストに含めます。 必要に応じて、sendEvent コマンドの personalization.surfaces オプション、または Web SDK拡張機能の対応する サーフェス ​ イベントを送信 ​ アクション設定で追加のサーフェスを指定することで、リクエストに追加のサーフェスを含めることができます。

    alloy("sendEvent", {
        ...
        "personalization": {
            "surfaces": [ "web://my.site.com/about.html", "web://my.site.com/contact.html" ]
        }
    })
    

    extension-add-surface

    イベントサーフェスは、query.personalization.surfaces リクエストフィールドに含まれています。

    {
    "events": [
        {
            "query": {
                "personalization": {
                "schemas": [
                    ...
                ],
                "decisionScopes": [
                    "__view__"
                ],
                "surfaces": [
                    "web://ajostage.weebly.com/"
                ]
                }
            },
            ...
        }
    ]
    }
    
  4. 他のパーソナライゼーション機能と同様に、事前非表示スニペット を追加して、エクスペリエンスを取得する際に、ページの特定の部分のみを非表示にすることができます。

Adobe Journey Optimizer Web エクスペリエンスの作成

Adobe Journey Optimizer の Web エクスペリエンスガイドの Web キャンペーンオーサリング手順に従って、キャンペーンとエクスペリエンス Journey Optimizer Web 作成します。

パーソナライズされたコンテンツのレンダリング

詳しくは、 パーソナライゼーションコンテンツのレンダリングに関するドキュメントを参照してください。

web サーフェスに対するAdobe Journey Optimizerの提案は、__view__ の決定範囲の提案と同様の方法で処理されます。 特に、sendEvent コマンド renderDecisions オプションが true に設定されている場合、これらは web SDKによって自動的にレンダリングされます。

Journey Optimizer コンテンツ提案のサンプル:

{
    "scope": "web://ajostage.weebly.com/",
    "scopeDetails": {
        "correlationID": "ccfaf19c-6360-4aea-b464-0cf924db5da7",
        "characteristics": {
            "eventToken": "eyJtZXNzYWdlRXhlY3V0aW9uIjp7Im1lc3NhZ2VFeGVjdXRpb25JRCI6ImEzNDYxYTMzLTc5MjktNGQyNS1hNmMxLTVkYzM2YWY1NzRmMyIsIm1lc3NhZ2VJRCI6ImNjZmFmMTljLTYzNjAtNGFlYS1iNDY0LTBjZjkyNGRiNWRhNyIsIm1lc3NhZ2VUeXBlIjoibWFya2V0aW5nIiwiY2FtcGFpZ25JRCI6IjEzN2JmMzllLWM1ODgtNGI1My1iODQxLTJiMWZiZDYxM2JkYiIsImNhbXBhaWduVmVyc2lvbklEIjoiMTA1NzY1MmEtZWYwNS00YjE3LWExMmUtY2FlOTQyOTFhMWFjIiwiY2FtcGFpZ25BY3Rpb25JRCI6ImViNTlmODQ4LTk5ZDYtNGE1OC05YmU4LTk4MjIxODU0NmYzNiIsIm1lc3NhZ2VQdWJsaWNhdGlvbklEIjoiYzg2NzFjZmItNDdjYS00YTVjLTg4Y2YtNzYwZDFlZjU1MzQyIn0sIm1lc3NhZ2VQcm9maWxlIjp7ImNoYW5uZWwiOnsiX2lkIjoiaHR0cHM6Ly9ucy5hZG9iZS5jb20veGRtL2NoYW5uZWxzL3dlYiIsIl90eXBlIjoiaHR0cHM6Ly9ucy5hZG9iZS5jb20veGRtL2NoYW5uZWwtdHlwZXMvd2ViIn0sIm1lc3NhZ2VQcm9maWxlSUQiOiI2YTViY2I3ZC02MmYxLTQ5NDItODRkMC02MzE5ZjM5Zjk1ZGUifX0="
        },
        "decisionProvider": "AJO",
        "activity": {
            "id": "137bf39e-c588-4b53-b841-2b1fbd613bdb#eb59f848-99d6-4a58-9be8-982218546f36"
        }
    },
    "id": "002321c0-dff5-4153-b171-a9dfb70b9750",
    "items": [
        {
            "schema": "https://ns.adobe.com/personalization/dom-action",
            "data": {
                "uiData": {
                    "tagType": "Text",
                    "actionType": "changed"
                },
                "content": "Welcome AJO!",
                "prehidingSelector": "#wsite-content > DIV:nth-of-type(2) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(3) > FONT:nth-of-type(1) > SPAN:nth-of-type(1)",
                "type": "setHtml",
                "selector": "#wsite-content > DIV.wsite-section-wrap:eq(1) > DIV.wsite-section:eq(0) > DIV.wsite-section-content:eq(0) > DIV.container:eq(0) > DIV.wsite-section-elements:eq(0) > DIV.paragraph:eq(0) > FONT:nth-of-type(1) > SPAN:nth-of-type(1)"
            },
            "id": "0a522f66-9e6a-4ded-b1d0-e9167f103290"
        },
        {
            "schema": "https://ns.adobe.com/personalization/dom-action",
            "data": {
                "uiData": {
                    "tagType": "Text",
                    "actionType": "changed"
                },
                "content": {
                    "font-weight": "bold"
                },
                "prehidingSelector": "#wsite-content > DIV:nth-of-type(2) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(3) > FONT:nth-of-type(1) > SPAN:nth-of-type(1)",
                "type": "setStyle",
                "selector": "#wsite-content > DIV.wsite-section-wrap:eq(1) > DIV.wsite-section:eq(0) > DIV.wsite-section-content:eq(0) > DIV.container:eq(0) > DIV.wsite-section-elements:eq(0) > DIV.paragraph:eq(0) > FONT:nth-of-type(1) > SPAN:nth-of-type(1)"
            },
            "id": "66216ca5-5d0f-4239-a8c8-6bc4a5a7cbdb"
        }
    ]
}

デバッグ

Adobe Journey Optimizer パーソナライゼーション実装をデバッグするには、web SDKのデバッグを使用してください。 Adobe Experience Platform Assurance を使用したトラブルシューティングの際には、Adobe Journey Optimizer のデバッグトレースを利用できます。 AJO: プレフィックスが付いたイベントを確認します。

assurance-ajo-trace

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636