Documentation > Website/HTML

Getting Started

Installing the JS code

The CleverTap JavaScript (JS) embed code is optimized for integration on both desktop and mobile web sites. The footprint is tiny, it supports SSL, and works asynchronously – so it won’t block your website.

// Copy and paste the below code snippet inside the <head></head> section of your website

<script type="text/javascript">
     var clevertap = {event:[], profile:[], account:[], onUserLogin:[], notifications:[]};
 // replace with the CLEVERTAP_ACCOUNT_ID with the actual ACCOUNT ID value from your Dashboard -> Settings page
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
		 var wzrk = document.createElement('script');
		 wzrk.type = 'text/javascript';
		 wzrk.async = true;
		 wzrk.src = ('https:' == document.location.protocol ? 'https://d2r1yp2w7bby2u.cloudfront.net' : 'http://static.clevertap.com') + '/js/a.js';
		 var s = document.getElementsByTagName('script')[0];
		 s.parentNode.insertBefore(wzrk, s);
  })();
</script>
copy Copied

The CleverTap JS code doesn’t have any dependency on the presence of JQuery or any other third party JS library.

CleverTap’s JS code also works well from within Google Tag Manager

Intro to User Profiles

CleverTap stores the user’s demographic data (gender, age, location), app and website interevents, campaign visits and transaction history to create a rich user profile for every user.

A User Profile is automatically created for every user visiting your website – whether logged in or not.

Initially, the User Profile starts out as “Anonymous” – which means that the profile does not yet contain any identifiable information about the user. You can choose to enrich the profile with attributes like name, age, customer id, etc.

Here’s an example of adding a name and age to the user’s profile:

clevertap.profile.push({
 "Site": {
   "Name": "Jack Montana", // User's name
   "Age": 28
 }
});
copy Copied

CleverTap provides easy API’s to enrich the user profile with data from sources like Facebook or Google Plus. You can also store your own custom defined attributes in a user’s profile. All these attributes can later be used to segment users.

For complete User Profile documentation, see: Working with User Profiles

Intro to User Events

A User Event is an event that a user takes in your website. CleverTap records the event on the User Profile, using an Event Name and optional associated key:value-based Event Properties. You can then segment users, target and personalize messaging based on both the Event Name and specific Event Properties.

An example of recording a User Event called Product Viewed:

clevertap.event.push("Product Viewed");
copy Copied

An example of recording a User Event called Product Viewed with Properties:

clevertap.event.push("Product Viewed", {
  "Product name":"Casio Chronograph Watch",
  "Category":"Mens Accessories",
  "Price":59.99,
});
copy Copied

For a complete guide to recording User Events, see: Working with User Events

Session Management

Some websites are accessed from a shared device such as desktop computers. In such a case, when a user logs out from your website, you can record a logout so that CleverTap can record a session end for that user.

When a user logs out from your website, invoke the following code for accurate session management:

// this snippet should be invoked when a user logs out from your website
clevertap.logout();
copy Copied

This will ensure that user profiles don’t get unified when multiple users are using the same device.

Web Pop-Ups

A CleverTap web pop-up is a modal alert-type message view displayed by CleverTap in your desktop or mobile website.

CleverTap web pop-ups come in two types:

  • Simple Web Pop-up Notifications
    You can use these templates to create your notifications:

      – Box Notification
      – Banner Notification
      – Interstitial Notification
      Screen Shot 2017-03-07 at 12.50.36 PM

    These are available for desktop and mobile sites.

Currently, we don’t support tracking clicks on custom web pop ups.

  • Exit Intent Notifications
    These are displayed just before the user exits your site. These are available for desktop only.

User clicks on a web notification can be silent, open a url or invoke a javascript function. Custom key value pairs can also be passed to the invoked javascript function.

You may also include a pre-set or custom image to be displayed in the notification.

Dashboard Guide

You can create, schedule, and target web notification campaigns from the CleverTap Dashboard.

See our Web Notifications Dashboard guide to get started.

Integration

There is no special integration required to use CleverTap web notifications.

Defining your own rendering listener

Using this custom callback, you will be able to control the look, feel and location of the web pop-up which you create in your CleverTap Dashboard.

You need to explicitly call clevertap.raiseNotificationViewed(); & clevertap.raiseNotificationClicked(); to ensure that notification views and clicks are tracked in your CleverTap Dashboard.

To define the callback and raise the clicked and viewed events, you need to add the following snippet to the embed code.

clevertap.notificationCallback = function(msg){
      //raise the notification viewed and clicked events in the callback
      clevertap.raiseNotificationViewed();
      console.log(JSON.stringify(msg));//your custom rendering implementation here
      var $button = jQuery("<button></button>");//element on whose click you want to raise the notification clicked event
      $button.click(function(){
         clevertap.raiseNotificationClicked();
      });
};

The msg will be in the following format:-

{
    "msgContent": {
        "title": "hello title!",
        "description": “hello message!"
    },
    "msgId": "1439796272_20160219",
    "kv": {
        "key1":"value1",
        "key2":"value2"
    }
}

msgId contains the campaign id and the date stamp so you can programmatically decide whether to show the notification or not. kv contains the custom key value pairs.

Best Practices

  • Each event should be recorded when you have the details/properties required to fully describe that event.
  • In general, we recommend that you record an event event only after it has passed all the validations successfully. For example, record “Added to Cart” only on successful addition to cart; raise “Charged” only on successful charging and so on.

Debugging

  • Error messages and warnings: logged to the JS console of the browser.
  • Verbose logging: enable verbose logging of all communication with the CleverTap servers by setting the WZRK_D variable in sessionStorage.
    — In the developer console of your browser type: sessionStorage['WZRK_D'] = '';