Lightweight Web Personalization Using Only Adobe RT-CDP and Web SDK
The Adobe Experience Platform (AEP) is a robust platform for delivering personalized customer experiences at scale. Many brands start with either it’s Real-Time Customer Data Platform (RT-CDP) or Customer Journey Analytics (CJA) product and then extend into additional capabilities like Journey Optimization for real time one-to-one personalization and engagement or the venerable Test & Target for applying personalization within the web channel and optimizing through experimentation.
For those starting with RT-CDP only, we typically begin with integrating data sources, building cross-channel profiles and audiences, and then pushing audiences back to other destinations for activation. And inevitably, the question is asked: “can we present a customized experience on the website using our profiles and audiences?”
In this article, we’ll dive in on how to perform lightweight personalization on a website using only AEP’s RT-CDP and WebSDK–and without a dedicated personalization tool.
Custom Personalization Connection
The magic feature that enables this ability is a combination of AEP’s Edge Network functionality and a built-in destination called Custom Personalization Connection which became available to all CDP accounts back in May 2023. Its purpose is to push profile attributes and segments information back to the browser for other tools to leverage (e.g. Target, Optimizely, etc).
Why Consider This Option for Personalization
This is an interesting option for those needing basic personalization but do not have a full-featured personalization tool in place or looking to prove out the investment for a dedicated personalization solution. Another benefit is that in many cases, implementing this personalization approach won’t require updates to be made through the web development team.
Potential Use Cases:
Present promotional offers to profiled users based on profile attributes, audience membership, or site usage.
Personalize content based on profile attributes
Validate a proof-of-concept for broader personalization solutions
Limitations
Keep in mind, CPC wasn’t designed to handle personalization directly and at scale but rather to provide hooks to the browser for other personalization approaches to leverage AEP’s real time segmentation and profile data. Consider this as a lightweight personalization solution that may not scale easily beyond as many actions as you’re willing to configure and manage as the presentation layer is updated. That said, you’ll also see that the effort to implement personalization actions isn’t that much more than using a dedicated tool like Adobe Target or Journey Optimizer. There’s also no built in feature to enable effective and controlled experimentation with results reporting–though it is feasibly possible for those more determined code slingers out there.
Prerequisites
Adobe Real-time Customer Data Platform (RT-CDP)
AEP’s WebSDK deployed on website via Adobe Tags (Launch)
AEP Data Collection with an active data stream collecting events from the website
The appropriate permissions in AEP to configure the related items
Working knowledge to configure Audiences, AEP Destinations and activations, Tagging Rules, and JavaScript to affect changes to webpage elements.
How Does Custom Personalization Connection Work?
In essence, Custom Personalization Connection is a destination that activates through your existing Web SDK data collection stream. It evaluates segments and profiles in real time within AEP’s edge network and sends a response payload with segment id and profile attributes back as part of the event response payload that can then be made available within the browser.
The Step-by-Step How To
Our use case for this how-to is to apply changes to a page on the website using JavaScript for a profiled user that is enrolled in a specific RT-CDP audience. You’ll need to predetermine the specific action you would like to take on the page, but for a proof-of-concept to test the feature, it could be as simple as changing the color of an element.
Step 1 - Add Custom Personalization With Attributes from the list of available Destinations (under the Connections section)
Click Configure New Destination
Enter a destination name (e.g. “Web Personalization”)
Enter a Alias (e.g. “Web Personalization”) - this is used in the response package to the browser to identify the source
Select your active data stream
You now have the active data stream from your site enabled as a destination to activate audience.
Step 2 - Create an Audience to Activate into the Edge Network
First, you’ll need to create a new merge policy that has “Active-On-Edge Merge Policy” enabled. If your default merge policy has this enabled, skip–but in most cases, you’ll need to add another merge policy enabled for edge.
Next, create an audience that you can enroll a known test profile that you can act as in whichever AEP sandbox you are working in.
NOTE: when first creating the audience, you will need to change the merge policy in use for that audience to the edge enable one (clicking the settings gear icon in the left panel to view) and then select “Edge Segmentation” for your evaluation method on the right panel of the audience builder window. This cannot be changed after you initially save the audience.
Step 3 - Activate the Audience to the Custom Personalization destination
From the audience detail page, click Activate to Destination
Select from the list the Custom Personalization destination you previous created and click Next
Next, optionally map any profile attributes that you want to include in the data response package that is pushed back to the browser through the data stream. Be careful not to include unwanted personal information. If you don’t map any attributes, the audience id will be pushed in either case. For this use case, you can skip mapping attributes.
Review your pending activation details and click Finish to save.
Congrats! You are now pushing actionable audience ids and (optionally) profile attributes back to the web browser in the response set for any event collected via the Web SDK data stream.
Step 4 - Validate that you're seeing the Alias name and any associated segments or attributes in your data stream response.
On the website configured for the sandbox in which you’re working, make sure you're using a session in the browser that’s identified as a profile that is an enrolled member of the edge audience you created previously. Note: edge audiences can take an hour to provision within the edge network.
Inspect the network calls in your browser console and filter for calls with “interact” in their name.
View the response for one of those “interact” calls. If CPC is working correctly, you should see something similar within the response payload:
The Alias value should match what you named the connection alias and the segment ids should match the audiences you’ve activated to the edge.
If you’re seeing your alias and some segment ids, congrats! If not, refer to the Adobe Documentation for more troubleshooting.
This is where configuring Custom Personalization Connect would typically handoff to another solution. Next we’ll dive deeper into using Adobe Tags and property rules to apply personalization directly from AEP.
Step 5 - Create Rule in Tags to Take Action from the Edge Response
Within Data Collection, create a new rule in your Tag Properties. You’ll need one for each specific personalization action you want to apply on the website.
For Name: Select Something the Describes what you’re doing
For Events:
Extension: select Adobe Experience Platform Web SDK
Event Type: Send event complete
Name: Adobe Experience Platform Web SDK - Send event complete (or whatever conforms with your naming convention)
Click Keep Changes to save
For Conditions:
Logic Type: Regular
Extension: Core
Condition Type: Custom Code
Name: Whatever best describes your action (e.g. get responseObj & Match Segment)
Open Editor and enter:
_satellite.setVar("responseObj",event.destinations[0]); if(typeof _satellite.getVar("responseObj") != "undefined"){var segmentList = _satellite.getVar("responseObj").segmentsfor(i=0;i<segmentList.length;i++){if(segmentList[i].id == "{the audience_id you created}"){return true;}}}return false;
The key element of interest here is what is made available within the _satellite.getVar("responseObj") object which becomes available through the Send event complete event in the previous step and is set by the _satellite.setVar() item in this step.
Click Save to close code editor
Click Keep Changes to save condition
You can optionally enter other consideration depending on your specific personalization scope (e.g. only fire on a specific page URI)
For Actions:
Extension: Core
Action Type: Custom Code
Name: {describe the acton you’re taking}
Language: Javascript
Click Open Editor and use javascript to affect the changes to your target page (e.g. for a first test, change the color of an element on the page). Once you get oriented apply changes, you can refer to attributes in the Web SDK response payload to further customize.
Click Save to close editor
Click Keep Changes to save your Action
Save the Rule
Step 6 - Publish Your Rule
Follow your normal publishing process and testing process
Step 7 - Verify Personalization Occurs per your Configured Rules
And that’s it!
Wrap Up
Adobe Experience Platform’s Custom Personalization Connection is a hidden treasure for those with RT-CDP and no personalization tool but have the desire to activate profiles and audiences directly to the web channel to create personalized experiences, promote deeper engagement, and drive greater conversion.
Have more questions about getting the most value out of your Adobe tools or your broader Marketing Data Stack, we’d love to hear from you.
