Web Integration

Requirements

This setup assumes you have already setup your App Key on the Dashboard.

Integration Steps

Install Contextual in your web project. Add this script into your index.html file.

<script>!function(e,t){!function(){var e="https://pointzi-sdks.azureedge.net/web/",n=[e+"public/css/streethawk-sdk.css"],r=[e+"dist/bundle/streethawk-pointzi-bundle.js"];n.forEach(function(e){var n=t.createElement("link");n.rel="stylesheet",n.href=e,(t.body||t.head).appendChild(n)}),r.forEach(function(e){var n=t.createElement("script");n.setAttribute("defer",!0),n.setAttribute("async",!1),n.src=e,(t.body||t.head).appendChild(n)})}(),e.streethawk=e.Pointzi=e.streethawk||{ready:function(t){var n=0,r=setInterval(function(){if(e.streethawk.register||1200==n)return clearInterval(r),void(1200==n?console.error("Time out! Contextual sdk not loaded."):"function"==typeof t&&t());n++},100)}}}(window,document);</script>

Put initial code to your main Javascript file, example:

For general website, put the code inside your main.js.

For Angular web app, you can register user right after they enter the app by putting the code into `root component`.

Don't worry about `USER_ID`, you can set it later by sending `user_id` tag. It is a string tag. More detailed angular instructions [here](/sdks/web/angular/)

Pointzi.ready(function() {

    // USER_ID is optional.
    // You can set it later by sending user_id tag. It is string tag.
    Pointzi.register( APP_KEY, USER_ID ).then(function() {
        // Send String Tag
        let key = "first_name";
        let value = "My First Name";
        Pointzi.tag.string(key, value);
    });
});

Note

To get your APP_KEY, go to dashboard.contextu.al, where you can see it's name at the top left of the screen.
USER_ID is the name you want to give to your install-id. This name is up to you. For more info visit the Tagging documentation. When you call register method, USER_ID is optional, you can set it later by sending user_id tag, it is string tag.

User Tagging

You can tag users/devices from your SDK in one line of code.

The SDK looks after the details for the device, you just supply the tag key and value:

• The tag name (key) is what you want to call it. In the example below "Plan-49" is how you will see this in the Contextual Dashboard.
• Contextual supports tags of: string, numeric and datetime. In the example below, the value for "Plan-49" is "Trial-Period".

String Tags

let key = "Plan-49";
let value = "Trial-Period";
window.Pointzi.tag.string(key, value);

Numeric Tags

let key = "BidValue";
let value = 549;
window.Pointzi.tag.numeric(key, value);

Datetime Tags

// Tagging using predefined StreetHawk tag.
let key = "sh_registered";
let value = new Date();
window.Pointzi.tag.datetime(key, value);

// Tagging using custom tag.
let key = "Birthday";
let value = new Date();
window.Pointzi.tag.datetime(key, value);

Increment Tag Value

let key = "PageVisited";
window.Pointzi.tag.increment(key);