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://sdk.contextu.al/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".
| let key = "Plan-49";
let value = "Trial-Period";
window.Pointzi.tag.string(key, value);
|
| let key = "BidValue";
let value = 549;
window.Pointzi.tag.numeric(key, value);
|
| // 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);
|
Last update:
2023-04-12