Implementing Personalization Using Dynamic Yield on Your Website

Personalization is the process of tailoring a product or a service on the basis of your audience preferences. You 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.

In this guide, we will discuss how we can implement Dynamic Yield on a Contentstack-powered website.

Process Overview

To understand how this works, we have created an example app using Express.js. The code can be downloaded from our GitHub repository or you can clone our repository. The downloaded project has sample content in a zip file named "content.zip" inside the "stack-content" folder which you need to import into your stack. We will describe below how to import the content using the Contentstack CLI.

The solution will take the content of the entry from the Home content type in a JSON format and using a webhook send it to an AWS lambda function that will convert the content of this entry to a CSV file and upload it in an S3 bucket. By using the content of this CSV file, we will create variations in Dynamic Yield and implement them on our Home page to see what personalized content works best.

Prerequisites

Steps for Execution

  1. Download the sample code
  2. Import Content using CLI
  3. Create a Delivery token
  4. Create an AWS S3 bucket
  5. Create an AWS lambda function
  6. Set up an API Gateway
  7. Create a webhook in Contentstack
  8. Add the data feed source in Dynamic Yield
  9. Create a template for your variations in Dynamic Yield
  10. Create an API custom campaign using the variation feed
  11. Get variation using Dynamic Yield's API and start the app
  1. Download the Sample Code

    For this exercise, you will use two sample code files:

    • One for the AWS Lambda function (file name index.zip which is inside the lambda-function folder).
    • Another one for our sample website content that we have built for this exercise.
    Download code

    You will need to unzip the content.zip file, which is inside the stack-content folder. Make a note of the path of the unzipped content folder as you will need this path in the next step.

  2. Import Content using CLI

    To help you understand how Dynamic Yield works with Contentstack, we have created a sample implementation. We have also created the content type schema and its entry in Contentstack. You simply need to import them to your Stack and we will use them in the sample application.

    To do this, you can use Contentstack command-line interface (CLI) and use the following steps:

    1. Install the Contentstack CLI:

      npm install -g @contentstack/cli
    2. Authenticate yourself with CLI:
      csdx auth:login
    3. Add a Management token to the session:

      csdx auth:tokens:add

      Note: To add a management token to the CLI session, make sure you have first generated that management token for your stack.

    4. Import the content types, assets, and entries:

      csdx cm:import -a <management_token_alias> -l <master_lang_of_stack> -d “<path>”
    • -a: Name/alias of the management token added in the session
    • -l: Code of the master language of your stack
    • -d: Path of the “content” folder downloaded in the previous step

      Example: csdx cm:import -a mgmt -l "en-us" -d "/Code/DY-Sample-App/stack-content/content"
      where mgmt is the alias of the Management token and the content folder contains folders for entries, assets, content_types, environments, and locales.
  3. Create a Delivery Token

    Once you have all the content in place, you need to generate a delivery token for the imported environment(s) to fetch the entry. If you don’t see your environment, refresh your browser.

    Now that our essentials are ready, let's move ahead and set up S3 and AWS Lambda.

  4. Create an S3 Bucket

    We need an S3 bucket to store the CSV file of our entry. To do this, perform the following steps:

    1. Log in to your AWS Management Console and, select S3 from the Services list.
    2. On the Amazon S3 page, click on Create bucketS3_dashboard.png
    3. On the Create Bucket page, provide a Bucket name, and uncheck the Block all public access option as shown below:uncheck-block-public-access.png

    4. Finally, click on the Create bucket button. Make a note of your “S3 bucket name” as you will need it in the next step.
  5. Create an AWS Lambda Function

    Perform the following steps to set up the AWS lambda function:

    1. From the Services list, select Lambda.
    2. Click on the Create function button and then the Author from scratch option.
    3. Provide a name to your lambda function, choose Node.js 12.x as your run-time language, and click on the Create function button.
    4. AWS Lambda offers an inline code editor. You can write your lambda code here or upload the code. For our example, we have provided the sample code which you downloaded in step 1.

      Upload the index.zip file, located inside the lambda-function folder, on Lambda by selecting the Upload a .zip file option from the Actions dropdown of the Function code window. 

      Note: Make sure the Handler, located in the Basic settings card, is set to index.handler.

      After uploading the zip file to the Lambda function, you will see the following screen:

      lambda-code-editor.png

      Note: The uploaded code file is large and therefore it will not be seen in the code editor. But the zip file is successfully uploaded to your Lambda function and you can proceed to the next step.

    5. Add the following Environment variables to the function:

      ACCESS_KEY
      : Access key of your AWS account
      SECRET_ACCESS_KEY
      : Secret access key of your AWS account
      BUCKET_NAME
      : Name of your S3 bucket

      env-variable.png

      Additional resource: Learn how to generate the Access and Secret access key in AWS in this guide.

    Now that your AWS lambda function is ready, let's create the API gateway to get the URL where our webhook will issue notifications.

  6. Set up an API Gateway

    For your Lambda function to be accessible publicly, you need to configure the AWS API Gateway using your function as the backend for the API as shown below:

    1. Navigate to the Lambda service, and click on your Lambda function that you just created in the above step.
    2. Click on + Add trigger as shown below:

      add-trigger.png

    3. In the Trigger configuration drop-down, select API Gateway.
    4. In the API drop-down, select Create an API, and choose the HTTP API template.
    5. Under the Security drop-down, select Open, and click on Add (at the bottom) to save your settings.
    6. After performing the above steps, you'll get an API endpoint URL that you can use while configuring the webhook in the next step.

      api-endpoint-url.png

  7. Create a Webhook in Contentstack

    We will now create a webhook that will invoke our Lambda Function. Follow the steps below:

    1. Log in to your Contentstack account, go to your stack, and click on the Settings gear icon.
    2. Then, click on Webhooks. On the Webhook page, click on + New Webhook.
    3. On the Create Webhook page, fill up the Name field. In the URL to notify field, enter the URL (API endpoint URL) that you generated in the previous step.
    4. Scroll down to the When section for creating a trigger for the webhook as shown below:

      webhook-conditions.png
    5. Ensure the Enable Webhook checkbox is selected and click on Save to save your Webhook settings.
    6. After the successful creation of the webhook, publish the Homepage entry on the “development” environment. This publishing action invokes the lambda function that takes the variations JSON response, converts it into a CSV file, and uploads it on your S3 bucket.
    7. Visit your S3 bucket and you can now see the variations.csv file in the bucket. Note down the URL of this file as you will need it in the next steps.

      s3_file_url.png

  8. Add the Data Feed Source in Dynamic Yield

    Now create a Data Feed that connects with the data, present in the variations.csv file, by performing the following steps:

    1. Go to your Dynamic Yield admin portal, then Assets, and then select Data feeds.
    2. Click on New Feed or New (if you have already created one), and select Variation Feed.
    3. Give an appropriate Name and paste the URL of the variations.csv file, located in your S3 bucket, in Feed Source.
    4. Expand the Advanced Settings tab and select the Synchronization period to define how often you want to synchronize the feed.
    5. Click Preview to view some of the feed data and verify the content.
    6. Verify that the Unique Key and Variation Name Key are mapped to the column that contains the variation name, for example, “title.”
    7. Click on Save & Activate.
  9. Create a Template for your Variations

    Next, we will create a template that will be used for each of our variations. To do this, follow the steps given below:

    1. Go to Assets and then select Templates.
    2. Click on New, provide a suitable Name, and in the Template Type drop-down, choose the Custom API Campaign.
    3. Click on Next and in the JSON tab, add the following:

      {
       "mainText": "${mainText}",</p>
       "secondaryText": "${secondaryText}",</p>
       "backgroundImage": "${backgroundImage}",</p>
        "buttonText": "${buttonText}"</p>
      }
      
    4. Click on Save.

    With these steps, we have added templates for our variations. Let's now move ahead with creating an API Custom Campaign.

  10. Create an API Custom Campaign Using the Variation Feed

    To do this, follow the steps given below:

    1. Go to API Campaigns, select Add New, and click on Custom.
    2. Provide a suitable Name and it will generate the API Selector Name. This selector is needed in API calls to the campaign.

      Note: Make a note of the API Selector Name as you will need it while configuring the sample app.

    3. Click on Next. Configure the targeting for your experience as per requirements and click on Next.targeting-options.png

    4. On the following Variations screen, click on syncing it with a Data Feed and select your Template.
    5. On the Source screen, select the Data feed source (created in Step 8), map the Data Feed Source columns with your Template Variable, and click on Next.

      Note: If the Data feed source does not appear in the list, refresh the page for it to get loaded in the list.

      map-datafeed-to-template.png

    6. On the Filter Data Feed screen, click Sync Variations.
    7. Now, on the Variations screen, click on the “Settings” gear icon:

      settings-gear-icon.png

    8. Set Variations Stickiness as Not sticky, and click on Done:

      not-sticky-option.png

    9. Finally, click on Save Experience, and then Publish it.
  11. Get Variation using Dynamic Yield's API and Start the App

    1. First, you will need to create an API key. To do so go to Settings, then API Keys, and click on New Key.
    2. Enter a key Name and select Source as Server-side.
    3. In the ACL section, select the Personalization checkbox and click on Save.
    4. In the Dynamic Yield Sample app downloaded at the beginning of the tutorial, open the .env file and add the Dynamic Yield's API Key, Dynamic Yield Host, and your stack credentials (stack API key, the delivery token of the publishing environment, and the environment name).

      stack-credentials.png

      Note: The value for the DY_HOST variable in the above code is the hostname of Dynamic Yield. It can either be US or EU depending on the region where it is hosted. Refer to the Choosing Variations and Pageviews section on their guide for more details.

    5. Open the routes/home.js file and assign the “API Selector Name” to the selector variable: 
      selector-variable.png

    6. Now open your command prompt, and move inside the project root directory. Then, install the required dependencies by running the following command:
      npm install
    7. Now staying in your project's root directory start the app on port 4000 using the following command:

      npm start

    Open the browser, hit the localhost at port 4000, reload the URL, and you'll see banner variations on your home page.

    2X_variation_change.gif

Additional Resources: You can implement personalization for your Contentstack-powered website using Optimizely too. To do so, refer to the Personalization using Optimizely guide.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow