Unliche SDK – For Websites

Last Updated On January 03, 2019
< Back

Unliche SDK for websites is a powerful single line integration. The unliche.js library is a JavaScript library for measuring how users interact with your website and to measure marketing campaigns performance metrics.

This document covers both the functional and technical requirements to implement the SDK into any website. It outlines the functional, performance, security and other system requirements.

Integrating the SDK
The process involves 3 key steps:

1. Login to your Advertiser account in Unliche.

2. Create a Website using the New Website wizard in Unliche. In the Website summary page, you would see the single line code to be integrated into your website code. A Unique API key for your website is pre-embedded into this code snippet making it unique only for your website.

3. Copy the code snippet and place it anywhere within the <HEAD> ______ </HEAD> tags of your website.

Syntax:
Js

<span style="font-size: 16px;"><span style="font-family: Helvetica Neue;"><script async defer src="https://d2rnf3cqz1r7vb.cloudfront.net/unlichewebsdk/unliche.min.js" onload="UnlicheSDK.init('API-KEY','SDK-MODE')"> </script></span></span>

Note
The unliche.js package is delivered via https://d2rnf3cqz1r7vb.cloudfront.net/unlichewebsdk/unliche.min.js.

Key Functions

1. SDK modes (Mandatory)
SDK provides integration in two modes.

test – You can use this mode when you have completed the SDK integration and trying to validate.
live – You can use this mode when you have completed the SDK integration, validated and ready to be deployed into the production.

As défaut, SDK will consider the ‘live’ mode.

2. Identify Pages
The Page function allows you to record page views on your website. Unliche SDK will automatically collects the page information from the page URL.

3. Identify Events
Tracking events is how you record any actions your users perform. Every event call records a single user action and sends data to that specific event for reporting analytics. These integrated activities can also act as engagement/conversion events through the tracking URL creation process. We recommend that you make your event names human readable.

Syntax:
Js

UnlicheSDK.trackEvent(EVENT_ID);

Note:
EVENT_ID is unique event id which you can find easily at Configuration section -> Events page.

Sample code :
Js
UnlicheSDK.trackEvent(1005);


4. Identify Users
The Users function tells who the current user is. This method provides Unliche with an unique user ID from the customer’s website which allows the data to be used for attribution and its an optional function. Unliche recommends only passing the HASH value to transmit any user ID related information.

Syntax:
Js
UnlicheSDK.setUserId(USER_ID);

Note : USER_ID is unique user id of each user.

Sample code :
Js
UnlicheSDK.setUserId(10005);

5. Purchase transaction event
The function allows you to record a transaction which is made in purchase of any of th product from your site. You can record the transaction amount when the successful transaction occurs through this function.

Syntax:
Js
UnlicheSDK.trackTransaction(PURCHASE_AMOUNT)

Note
By default, Unliche SDK considers the default currency for the purchase transaction is USD($).

Sample Code
Js
UnlicheSDK.trackTransaction(10049);

CMS INTEGRATIONS

1. WordPress
1) Install required component plugins in wp-admin
2) Follow the three integration steps which are listed above and add the Unliche SDK script in HTML header.
3) No need to include JQuery externally, because its already present in WP
4) If you want to track the events in your Word Press website, please put the following code with event id.

Syntax:
Js

<script>
    document.onreadystatechange = () => {
         if (document.readyState === 'complete') {
              jQuery('#component_id').click(function() {
                    UnlicheSDK.trackEvent(event_id);
              });
         }
    }
</script>


Note

Please refer the “#3 Identify Events” section above  to know more about event_id. And “component_id” will be the id of the javascript component.

2. Magento

For version 2.0.4
1. Login as administrator
2. Click on Store menu and configuration sub-menu.
3. Inside General select Design option
4. Follow the three integration steps which are listed above and add the Unliche SDK script in HTML header, miscellaneous script field.
5. If you want to track the events in your Word Press website, please put the following code with event id and along with component id.

Syntax:
HTML

<script>
    document.onreadystatechange = () => {
         if (document.readyState === 'complete') {
              jQuery('#component_id').click(function() {
                    UnlicheSDK.trackEvent(event_id);
              });
         }
    }
</script>

Note
Please refer the “#3 Identify Events” section above  to know more about event_id. And “component_id” will be the id of the javascript component.

For version 2.1
1. Login as administrator
2. Click on Content menu and configuration sub-menu.
3. In the list of themes, click on edit button that lies on right side of list.
4. Follow the three integration steps which are listed above and add the Unliche SDK script in HTML header, miscellaneous script field.
5. If you want to track the events in your Word Press website, please put the following code with event id and along with component id.

Syntax:
HTML

<script>
    document.onreadystatechange = () => {
         if (document.readyState === 'complete') {
              jQuery('#component_id').click(function() {
                    UnlicheSDK.trackEvent(event_id);
              });
         }
    }
</script>

Note
Please refer the “#3 Identify Events” section above to know more about event_id. And “component_id” will be the id of the javascript component.

OPTIONAL INTEGRATIONS

1. Tracking id for Google Analytics
Unliche SDK uses GA’s custom dimension to collate GA data during tracking, If you have already enabled or planning to integrate Google Analytics in your website. Integrate the below code and get your GA and Unliche data in single analytic panel. To get tracking id for this, need to integrate below Unliche method, in return will receive ID. Pass this ID to GA.

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
    var trck_id = UnlicheSDK.getIdForGA();
    //Need to put google analytic code here and pass track_id
    }
};

Get GA integration code from here

Note: trck_id is ID for GA


Sample code:
Js

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        trck_id = UnlicheSDK.getIdForGA();
        <!-- Google Analytics -->
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new
            Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-XXXXXXX', 'auto');
        ga('require', 'displayfeatures');
        ga('require', 'linkid', 'linkid.js');
        ga('set', 'anonymizeIP', true);
        ga('set', 'forceSSL', true);
        alert(trck_id);
        var dimensionValue = trck_id;
        ga('set', 'dimension1', dimensionValue);
        ga('send', 'pageview');
        <!-- Google Analytics -->

    }
};

Performance Impact
The SDK has been thoroughly tested and is known to cause no adverse performance impact to a website where it has been implemented. Further the SDK is delivered via world-wide delivery points (edge locations via CDN) in order to maximise the speed of transmission of data between the websites and our servers.