README
Accordant Adobe Components - 2019
Install
npm install @accordant/adobe-components
Usage
Import both AT components to do personalisation with Adobe Target.
import '@accordant/adobe-components/at-personalise';
import '@accordant/adobe-components/at-offer';
Disclaimer
This expects you to have a esModule resolver in your build scripts. If you do not, you cannot use these components.
Support without a build step will be supported in later versions.
Dev Environment - HTML Offer
Wrap elements that you want to personalise in your markup with the AT components. Each at-personalise element must have an mbox-name to be identified and personalised with Adobe Target.
<at-personalise mbox="webpage-header">
<at-offer name="default">
<h1>This is the Default Heading</h1>
</at-offer>
</at-personalise>
When delivering a HTML based offer via target, the original document should serve the default offer.
Adobe Target - HTML Offer
Create a new Target Activity for your A/B experience. We recommend using the Form based editor rather than the VEC for running tests with the at personalise components.
Select the desired mbox to customize and create a custom HTML offer.
Any HTML provided in this offer will then be appropriately served within the at-personalise component as a new at-offer component, named 'alternative-html-offer'.
Custom HTML offers can contain script and style tags.
A custom mbox can only deliver one piece of personalisation. If multiple activities are targeting the same at-personalise component, then the activity with the highest priority (or the one delivered last if all activities are of equal priority), will populate the page.
Dev Environment - JSON Offer
Adobe Target can also be used to customise experiences with JSON.
In this scenario, the alternative offers should also be authored in the base document.
<at-personalise mbox="webpage-header">
<at-offer name="default">
<h1>This is the Default Heading</h1>
</at-offer>
<at-offer name="alternate-header-offer">
<h1>This is a Custom Heading</h1>
</at-offer>
</at-personalise>
Adobe Target - JSON Offer
Similar to the HTML offer, we create an activity and select the at-personalise mbox.
Once selected, we create a custom JSON offer and use the structure below to select which pre-authored offer to display onsite for the selected experience.
{
"content": [
{
"name": "alternate-header-offer"
}
]
}