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"
        }
    ]
}