Adobe Experience Platform Web SDK can deliver and render personalized experiences managed in Adobe Journey Optimizer to the web channel. You can use a WYSIWYG editor, Adobe Journey Optimizer Web Channel, or a non-visual interface, the Code-based Experience Channel to create, activate, and deliver your Journey Optimizer Web campaigns and personalization experiences.
Read the Adobe Journey Optimizer Web Channel documentation for information on getting started with Journey Optimizer Web experience authoring and reporting.
Surface: A web surface is a web page or location on a page identified by a URI where the Adobe Journey Optimizer experience content will be delivered.
Propositions: In Adobe Journey Optimizer, propositions correlate to the experience selected from a Journey Optimizer Campaign.
To start using Adobe Journey Optimizer, follow the steps below.
Go through the prerequisites from the Adobe Journey Optimizer Web Experiences Guide, specifically:
Add the renderDecisions
option to your events. Set renderDecisions
to true
for automatic rendering of delivered Journey Optimizer content propositions on your web page surfaces.
alloy("sendEvent", {
...,
"renderDecisions": true
})
Optionally, specify additional surfaces in your events. By default, the Web SDK will automatically generate the web surface for the current web page and include it in the request to the Edge Network. If required, additional surfaces can be included in the request by specifying these in the personalization.surfaces
option of the sendEvent
command, or in the corresponding Surfaces Send event action configuration of the Web SDK Extension.
alloy("sendEvent", {
...
"personalization": {
"surfaces": [ "web://my.site.com/about.html", "web://my.site.com/contact.html" ]
}
})
Event surfaces are included in the query.personalization.surfaces
request field:
{
"events": [
{
"query": {
"personalization": {
"schemas": [
...
],
"decisionScopes": [
"__view__"
],
"surfaces": [
"web://ajostage.weebly.com/"
]
}
},
...
}
]
}
Similar to other personalization features, you can add a prehiding snippet to hide only certain portions of the page while fetching experiences.
Follow the web campaign authoring instructions from the Adobe Journey Optimizer Web Experiences Guide to create Journey Optimizer Web campaigns and experiences.
See the documentation on rendering personalization content for more information.
Adobe Journey Optimizer propositions for web surfaces are processed in a similar manner to the __view__
decision scope propositions. Specifically, when renderDecisions
option is set to true
in the sendEvent
command these will be automatically rendered by the Web SDK.
Sample Journey Optimizer content proposition:
{
"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"
}
]
}
To debug Adobe Journey Optimizer personalization implementations, use Web SDK debugging. Adobe Journey Optimizer debug traces are available when troubleshooting using Adobe Experience Platform Assurance. Check for events with the AJO:
prefix.