Web Native Display

Learn about the configurations required to set up web native display on your website

📘

Private Beta

This feature is released in private Beta. To apply for the Private Beta access, contact your customer success manager.

Overview

Web Native Display enables organizations to tailor the content of a website for delivering contextual and personalized user experiences for their customers. Basically, web native display is the real-time individualization of a website to cater to each individual’s varying needs.

40024002

❗️

Prerequisites

  1. Ensure that you have integrated CleverTap's new Web SDK.
  2. Ensure that the default/fallback content is configured on your website to render in case of delayed response from CleverTap servers

Custom Key-value Pair Template

In the Custom Key-Value pair template, CleverTap sends the desired custom data configured by clients in the JSON format to the client website. The developer uses this custom key-value data to personalize the web elements of the website.

Sample Key-Value Web Native Display Campaign

15341534

Once you create a Key-value pair campaign on CleverTap dashboard for your website, you need to:

  1. Define rendering functions For Key-Value Pairs
  2. Listen to the key-value pairs sent by CleverTap
  3. Determine the topic value and render a personalized element
  4. Raise Notification Viewed and Notification Clicked Events

Define Rendering Functions For Key-Value Pairs

Developers need to define functions that accept the key-value pair that you have configured as a part of your campaign. They can define their custom rendering logic basis the custom event use case. For example, if you want to render a personalized banner for a cart drop-off event, you need to define the specific rendering logic for the same.

Given below is a sample function to render a custom personalized banner on your website.

Let us assume you have the following HTML element on your page:

<div id="container">
    <div class="close">&times;</div>
  <img src="https://img.freepik.com/free-photo/young-gowoman-yellow-leather-jacket-copy-space_23-2148674153.jpg?w=2000"/>
  <div class="message">
    Hello <span id="user-name">user</span>,
    <p>Still thinking about the <span id="product-name">item</span> in your cart?</p>
    <p>We get it - it's fabulous.</p>
    <p>Use SALE20 and avail 20% off</p>
    <p>What are you waiting for??</p>
  </div>
</div>

For personalizing the above HTML element with the key-value pair defined while creating the campaign, you can define a custom rendering function as shown below:

function renderCartDropOffPersonalisationCampaign(data) {
    const name = data.kv.Name;
  const product = data.kv.Cart;
  const containerEl = document.getElementById('container')
  const userNameEl = containerEl.getElementById('user-name')
  usernameEl.innerText = name
  const productNameEl = containerEl.getElementById('product-name')
  productNameEl.innerText = product 
}

Listen to the key-value pairs sent by CleverTap

The developer needs to add a listener for the event - CT_web_native_display and define a callback function that will be executed whenever the event happens.

document.addEventListener("CT_web_native_display", function(event) {
    console.log(event);
});

A sample event object would look as follows:

{
  "detail": {
    "kv": {
          "topic": "Cart drop-off",
          "Name": "Alice", 
          "Cart": "Roadster Jacket",
        },
    msgId: "1649748667_20220412",
    wzrk_pivot: "wzrk_default" 
  }
}

🚧

Note

The first key of your object will always be topic. The marketer can provide the relevant value of this key while configuring the campaign. The developer must use this value to access the right payload for that campaign.

Determine the Topic Value and Render Personalized Element.

Basis the topic value, you need to call the appropriate custom rendering logic defined in step 1.
Given below is a sample rendering logic.

document.addEventListener("CT_web_native_display", function(event) {
  const data = event.detail;
    const topic = data.kv.topic;
    switch (topic) {
        case "Cart drop-off": {
            renderCartDropOffPersonalisationCampaign(data)
            break;
    }
  }
});

Raise Notification Viewed and Notification Clicked Event

To raise the NotificationViewed and NotificationClicked event, you can call the clevertap.renderNotificationViewed(data); and clevertap.renderNotificationClicked(data); API within the custom rendering function defined in Step 1.

Here data is the argument that your custom rendering function receives.

function renderCartDropOffPersonalisationCampaign(data) {
    const name = data.kv.Name;
  const product = data.kv.Cart;
  const containerEl = document.getElementById('container')
  const userNameEl = containerEl.getElementById('user-name')
  usernameEl.innerText = name
  const productNameEl = containerEl.getElementById('product-name')
  productNameEl.innerText = product 
  clevertap.renderNotificationViewed(data);
  containerEl.addEventListener('click', () => {
    clevertap.renderNotificationClicked(data)
  });
}

Did this page help you?