Overview

Cordial's Site Personalization enables you to leverage data from sent messages to personalize website experiences with individually-tailored content. This powerful tool helps you create resonant site experiences with a personal touch, displaying categories of known interest, personalized coupon offers, and much more.

Use cases

• Display personalized site experiences based on product affinity and purchase history when a customer clicks through a message to view your website
• Offer unique coupon codes tailored to purchase history and affinity
• Greet contacts by name and showcase highly relevant content to create welcoming and rewarding site experiences

Contact your CSM to begin using Site Personalization. You need to have Cordial's JavasScript Listener V2 installed on your site.

How it works

1. Install Site Personalization. 

2. Include the Site Personalization Smarty function with the name, purchase history, or any other contact attributes you want to use for personalized message and site content.

3. Enable your website to read the Site Personalization content.

5. Create dynamic website and message content to use for Site Personalization.

6. Send the message.

• Example email with Site Personalization content

7. When the customer clicks to your site from the message, they'll see content personalized specifically for them.

• Example website content that's personalized for the customer

Initial setup

The Site Personalization tool works in conjunction with our Embedded Javascript Listener V2. To enable it, simply add the line below to your initialization of the JS Listener. Once complete, you can add personalized content to any message—and then leverage data from those messages to create personally tailored website experiences.

<script> 
(function (C,O,R,D,I,A,L){ 
  C.CordialObject=I,C[I]=C[I]|| function (){(C[I].q=C[I].q||[]).push(arguments)}; 
  C[I].l=1*new Date,C[I].q=[],A=O.createElement(R); 
  L=O.getElementsByTagName(R)[0],A.async=1 ,A.src=D,L.parentNode.insertBefore(A,L); 
})(window, document, "script", "//d.email.example.com/track.v2.js", "crdl"); 
 
crdl("connect", "YOUR_ACCOUNT_KEY_HERE", {  
    trackUrl: "//se.email.example.com" , 
    connectUrl: "//d.email.example.com" , 
    cookieDomain: "email.example.com" ,
    sitePersonalizationEnabled: true, 
    cookieLife: 365 
}); 
</script>

Feel free to contact your CSM or Cordial Support for any assistance you might need.

Gather data from messages for Site Personalization

To gather data for Site Personalization from sent messages, use the following Smarty function anywhere in the message content.

{$utils->setSitePersonalization('name', 'Example Name')}

You can also leverage dynamic content within the Site Personalization Smarty function. For example, you could add $contact.first to the above Smarty call to use the firstname attribute. You can find more examples of contact attributes to use in personalization efforts in the contact attributes article.

Data nesting

You can also nest personalization data into an array. This is useful if you want to include a list of purchases, SKU codes, or any other associated data for the contact.

{$utils->setSitePersonalization('name', $contact.first)}
{$utils->setSitePersonalization('gender', 'male')}
{$utils->setSitePersonalization('purchases', ['recent' => ['SKU123', 'SKU456'], 'spent' 
=> ['amount' => 10254.25]])}

Personalized content

Personalized content will be created as the message is sent through Cordial. When a customer clicks a link in your message, Cordial's Site Personalization will take over, allowing you to pinpoint data on your site that's directly related to the contact. 

Enable your site to read personalization data

Site Personalization adds a new function to our JavaScript Listener that allows you to access and leverage data when contacts access your site from a message sent through Cordial.

1. Integrate the new personalization function into your existing JavaScript code

The first step of enabling your site to read personalization data is to install the new Site Personalization function into your existing JavaScript code after initializing the JavaScript Listener. 

crdl.sitePersonalization.forLastClick()

The function will return a response with any data found for the customer.

2. Example data returned

Here's an example of last click message data returned from the sitePersonalization function.

{
  "name": "UserA",
  "experience": "1",
  "purchases": {
    "spent": {
      "amount": "10000"
    }
  }
}

3. Full JavaScript example with branching experiences based on personalization data

The example below is based on the last click data gathered from a message sent through Cordial.

window.addEventListener("cordialLoaded", (e) => {
    crdl.sitePersonalization.forLastClick()
        .then((response) => {
            // Check if the experience data exists
            if( response.experience ){
                if( response.experience == 1 ){
                    //Code Related to experience 1. You could change colors, update content, etc.
                    document.getElementById("experience1").textContent = `Welcome ${response.name}! Spend: $${response.purchases.spent.amount}`;
                }else if( response.experience == 2 ){
                    //Code Related to experience 2. You could change colors, update content, etc.
                    document.getElementById("experience2").textContent = `Welcome ${response.name}! Spend: $${response.purchases.spent.amount}`;
                }
            }
        })
});

If no data is returned from the crdl.sitePersonalization.forLastClick() function, you'll simply see empty brackets: {}.

4. Handling default website experiences

Updating the JavaScript example above, here's one way you could handle a default experience if no data is found for the customer.

Having a default experience is highly recommended to cover the rare situation when customer data is empty or unavailable.

window.addEventListener("cordialLoaded", (e) => {
    crdl.sitePersonalization.forLastClick()
        .then((response) => {
            // Check if the experience data exists, if not display a default experience
            if( response.experience ){
                if( response.experience == 1 ){
                    //Code Related to experience 1. You could change colors, update content, etc.
                    document.getElementById("experience1").textContent = `Welcome ${response.name}! Spend: $${response.purchases.spent.amount}`;

                }else if( response.experience == 2 ){
                    //Code Related to experience 2. You could change colors, update content, etc.
                    document.getElementById("experience2").textContent = `Welcome ${response.name}! Spend: $${response.purchases.spent.amount}`;
                }
            }else{
                document.getElementById("default-experience").textContent = `Welcome to the site, need an account? Sign up for a 10% off coupon`;
            }
        })
}); 

5. Resulting site HTML

With both of the examples above, three HTML elements would be created. HTML div tags are used below. You could also use one div tag and change the content accordingly.

The HTML element names used below are not a requirement. Any naming convention you currently use will work.

<div id="experience1"></div>
<div id="experience2"></div>
<div id="default-experience"></div>