Platform Web SDK에 Adobe Journey Optimizer 사용 중

Adobe Experience Platform Web SDK은(는) Adobe Journey Optimizer에서 관리되는 개인화된 경험을 웹 채널에 전달하고 렌더링할 수 있습니다. WYSIWYG 편집기, Adobe Journey Optimizer 웹 채널 또는 코드 기반 경험 채널인 비시각적 인터페이스를 사용하여 Journey Optimizer Web 캠페인 및 개인화 경험을 만들고, 활성화하고, 제공할 수 있습니다.

IMPORTANT
Journey Optimizer Web 경험 작성 및 보고 시작하기에 대한 자세한 내용은 Adobe Journey Optimizer 웹 채널 설명서를 참조하십시오.

용어 terminology

표면: 웹 표면은 Adobe Journey Optimizer 경험 콘텐츠가 전달될 URI로 식별된 페이지의 웹 페이지나 위치입니다.

제안: Adobe Journey Optimizer에서 제안은 Journey Optimizer Campaign에서 선택한 경험과 상관 관계가 있습니다.

Adobe Journey Optimizer 사용 enable-ajo

Adobe Journey Optimizer을(를) 사용하려면 아래 단계를 따르십시오.

  1. Adobe Journey Optimizer 웹 경험 안내서에서 필수 구성 요소를 살펴보십시오. 구체적으로 다음과 같습니다.

    • Adobe Experience Cloud Visual Editing Helper을(를) 설정합니다.
    • 데이터스트림에서 Adobe Journey Optimizer을(를) 사용하도록 설정합니다.
    • Active-On-Edge 병합 정책 옵션을 사용하도록 설정합니다.
  2. 이벤트에 renderDecisions 옵션을 추가합니다. 웹 페이지 표면에 전달된 Journey Optimizer 컨텐츠 제안을 자동으로 렌더링하려면 renderDecisions을(를) true(으)로 설정하십시오.

    code language-javascript
    alloy("sendEvent", {
        ...,
        "renderDecisions": true
    })
    
  3. 이벤트에서 추가 서피스를 지정합니다(선택 사항). 기본적으로 웹 SDK는 현재 웹 페이지에 대한 웹 표면을 자동으로 생성하고 Edge Network에 대한 요청에 포함합니다. 필요한 경우 sendEvent 명령의 personalization.surfaces 옵션이나 Web SDK 확장의 해당 표면 이벤트 보내기 작업 구성에서 이를 지정하여 요청에 추가 표면을 포함할 수 있습니다.

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

    확장 추가 표면

    이벤트 표면이 query.personalization.surfaces 요청 필드에 포함되어 있습니다.

    code language-json
    {
    "events": [
        {
            "query": {
                "personalization": {
                "schemas": [
                    ...
                ],
                "decisionScopes": [
                    "__view__"
                ],
                "surfaces": [
                    "web://ajostage.weebly.com/"
                ]
                }
            },
            ...
        }
    ]
    }
    
  4. 다른 개인화 기능과 마찬가지로 경험을 가져오는 동안 페이지의 특정 부분만 숨기도록 코드 조각 사전 숨김 ​을 추가할 수 있습니다.

Adobe Journey Optimizer 웹 경험 만들기 create-ajo-web-experiences

Journey Optimizer Web개의 캠페인 및 경험을 만들려면 Adobe Journey Optimizer 웹 경험 안내서웹 캠페인 작성 지침을 따르십시오.

개인화된 콘텐츠 렌더링 rendering-personalized-content

자세한 내용은 개인화 콘텐츠 렌더링에 대한 설명서를 참조하십시오.

웹 표면에 대한 Adobe Journey Optimizer 제안은 __view__ 결정 범위 제안과 유사한 방식으로 처리됩니다. 특히 sendEvent 명령에서 renderDecisions 옵션을 true(으)로 설정하면 웹 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"
        }
    ]
}

디버깅 debugging

Adobe Journey Optimizer 개인화 구현을 디버깅하려면 Web SDK 디버깅을 사용하십시오. Adobe Experience Platform Assurance을(를) 사용하여 문제를 해결할 때 Adobe Journey Optimizer 디버그 추적을 사용할 수 있습니다. AJO: 접두사가 있는 이벤트를 확인합니다.

assurance-ajo-trace

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