Implementing Personalization Using Dynamic Yield on Contentstack-powered websites

Personalization is the process of tailoring a product or a service based on your audiences’ preferences. You can implement personalization by customizing your website or its content (text or images) based on your users' behavior and interactions.

Dynamic Yield is a popular AI-powered personalization platform that helps businesses to enhance the digital customer experience through machine learning, predictive algorithms, auto-optimization, and recommendations.

This guide will go through the steps required to implement Dynamic Yield on a Contentstack-powered website.

Process Overview

To implement Dynamic Yield on a Contentstack-powered website, you need to create multiple variations. For example, create multiple banners for a website to display different content.

To create variations, create a template in Dynamic Yield. In this case, we have selected Dynamic Content as our template type. Once done, you will see multiple sections such as Variables, HTML, CSS, and JavaScript. In the HTML section, add the code for displaying the banner. In the JS section, write an API call to fetch the entry’s content from Contentstack in a JSON format. By using this content, you can create variations in Dynamic Yield and implement them on the website.

Note: With this approach, you do not need to write HTML code in the website source code.

Prerequisites

Steps for Execution

Create Content Type and Entry in Contentstack
Create a Delivery Token
Create a Template in Dynamic Yield
Create a Campaign using the Template
Add Embed Code in your Source Code.

Create Content Type and Entry in Contentstack
To create a content type and entry in Contentstack, follow the steps below:
1. Go to your stack, click the Content Models icon in the left navigation panel, and click the + New Content Type button.
2. Create a content type by adding a Group Field.
3. In the Advanced group properties, select Multiple to create multiple banner variations with multiple details/fields. Then click Save and Close.
4. In the left navigation panel, click Entries. On the Entries list page, click the + New Entry button, select the content type and then click the Proceed button.
5. Add content in your entry, i.e., add content for Hero Banner details.
Create a Delivery Token
To fetch the content of the entry from Contentstack via Dynamic Yield, you need to generate a delivery token. With this, you can call the Contentstack API directly via your Dynamic Yield account.
Create a Template in Dynamic Yield
To create a template for each of the variations, follow the steps below:
1. Go to your Dynamic Yield account, click Assets, and select Templates.
2. Click New to create a new template.
3. Provide a suitable Name. In the Template Type drop-down, select Dynamic Content.
4. Click Next.
5. In the HTML tab, add the HTML code for banner implementation.
  Note: You need to add the HTML code manually as per your banner structure.
  Here’s a sample code:
```
<div class="wrapper"> <div class="main-container">
<div class="home-hero-bg hero-bg" id="home">
<div class="background-overlay"> </div>
<div class="aligned-container typed-container">
<div class="container">
<div class="typing-block">
<div class="typing-block" id='mainText'>
</div> </div>
<p id='secondaryText'></p>
<a href="/" class="btn btn-primary mrm" id='buttonText'> </a>
</div>
</div>
</div>
</div>
</div>
```
6. In the CSS tab, add the required CSS. You can also add the URL of External Stylesheets.
7. In the JS tab, write the code to fetch the content of the entry from Contentstack.
  Note: You need to add the data based on your Content Type and Entry, such as Content Type UID, Stack API Key,Delivery Token, Entry UID and Environment. Provide the Content Type fields’ name accurately to fetch the corresponding data.
  Here’s a sample code :
```
async function getData(){
  let response = await fetch('https://cdn.contentstack.io/v3/content_types/add_content_type_uid_here/entries/add_entry_uid_here?environment=${environment}',{
    headers:{api_key:'add_api_key_here',access_token:'${delivery_token}'}
  })
  let data = response.json();
  return data;
}
 
getData().then(data=> {
  const variationIndex = parseInt('${variation_number}') - 1
  const variationData = data.entry.hero_banner[variationIndex];
  document.getElementById("buttonText").innerText = variationData.cta.title
  document.getElementById("mainText").innerText = variationData.title
  document.getElementById("secondaryText").innerText = variationData.description
  document.getElementById("home").style.backgroundImage = "url("+variationData.banner_image.url+")"
}).catch(error=> console.error("error :: ",error))
```
8. You need to create a variable for the variation_number, environment, and delivery_token mentioned in the JS file. To add the variable, go to the Variables tab and enter the required details as below. The syntax to define the variation_number will be '${variation_number}' in the JS tab.
  Note: With variation_number, you can identify and preview the different versions of your banner website. With environment and delivery_token, you can fetch entries published in that particular environment. There is no particular criteria to define the variables in Dynamic Yield.
  Let’s look at the steps to define the variables:
  1. Click the Variables tab, and a slider opens.
  2. In the Type drop-down, select the type of variable you want to create, such as Number, Image, Text, Color Picker, URL parameter, etc.
  3. Provide a Name. Select the Maximum and Minimum Value for the variable.
  Let’s look at the steps to define the environment:
  1. Click the environment tab, and a slider opens.
  2. In the Type drop-down, select the type of variable you want to create, such as Number, Image, Text, Color Picker, URL parameter, etc.
  3. Provide a Name such as environment.
  Let’s look at the steps to define the delivery_token:
  1. Click the delivery_token tab, and a slider opens.
  2. In the Type drop-down, select the type of variable you want to create, such as Number, Image, Text, Color Picker, URL parameter, etc.
  3. Provide a Name.
9. Once done, click Save.
Create a Campaign using the Template
To create a campaign, follow the steps below:
1. In the left navigation panel, click Web Personalization. Then click Create Campaign.
2. A dashboard appears. Select Dynamic Content as Campaign Type.
  Note: If you select any other campaign type, then the steps for that campaign will be different.
3. Provide a suitable Name. Select the Layout for your campaign.
4. In the Location drop-down, you can select the area of your website or page where you want to fetch the banner from Dynamic Yield. Select one of the following.
  Note: You need to implement Dynamic Yield scripts in the <head>section of every page. To get the Dynamic Yield scripts, go to Settings → General Settings.
  1. Replace Element: Create an element in the source file, and provide the CSS selector for that element. Replace Element will replace the given element with HTML code from Dynamic Content Template.
    For example, you want to replace the below element with the HTML code added in the Dynamic Content Template. To do so, follow the steps:
    <div class="replaceDiv"></div>
    1. Add .replaceDiv in Enter element CSS selector field.
    2. In the On the Following Pages field, add the page URL where you want to add the dynamic element.
    3. Click Apply Changes.
  2. Add after an Element: It will add the Dynamic Content template after the given element.
  3. Add before an Element: It will add the Dynamic Content template before the given element.
  4. Embed with Code: After configuring the campaign successfully, you will get a code. You need to add this code to the page’s source file where you want to add the banner fetched from Dynamic Yield.
  Note: The above process applies only to the Single Layout option.
5. To customize the user experience, define the target audience as shown below. After defining the target audience, click the Next button.
6. On the Variations tab, click New Variation.
7. Select the template created in the previous step.
8. Define the variation_number, environment, and delivery_token for each variation. Click Save and Add Another to add multiple variations.
9. Once done, click the Save Variation button. You will see the list of all the variations created.
10. Click the Settings icon.
11. Dynamic Yield sticks an icon on your website. To avoid that, in the Variations Stickiness drop-down, select Not sticky. Then click the Done button.
12. To replace the original content with the dynamic variation, select Random variation. Then click the Next button.
13. Select the Active status to publish the variation, and click the Save Experience button.
14. Once done, click Publish.
15. Refresh the page to see the variation for any one of the locations, i.e., Replace Element/ Add After Element/Add Before Element.
  Note: It may take a few minutes for the newly published campaign to be available on your live site.
  Note: To use dynamic content in different environments , you need to create separate campaigns for each environment.
Add Embed Code in your Source Code
After successfully configuring your campaign, you will get the Embed Code on the campaigns’ list page.
1. Click the Embed Code icon and paste this code into your website's source code.
2. Embed Code will have one < div> tag and one <script> tag. Paste the <div> tag in the HTML code where you want to display the banner and add the <script> tag at the end of the HTML code of the same page.
Note: This step is applicable only if you are using Location as Embed with Code. To use it in different environments, you need to create separate site personalization for each environment. You will receive different embed code for different site campaigns.
Refresh the page; to view the variations.
Additional Resource:
Dynamic Content Campaigns ,
Experience Advanced Settings,
Creating Templates