Angular integration
There are two main steps to integrate Pointzi in your Angular App, both steps can
also be done in slightly different ways. The following will go through the main
ways to get Pointzi integrated into your Angular App.
Step 1 - Add the Pointzi script
The first way you can do this is by simply adding the script below directly into
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! Pointzi sdk not loaded."):"function"==typeof t&&t());n++},100)}}}(window,document);</script>
|
The second way (recommended) is that you put the below code into a file (i.e pointzi.js)
you can then load the file into your index.html file.
| !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! Pointzi sdk not loaded."):"function"==typeof t&&t());n++},100)}}}(window,document);
|
Once you have added above the code into a file such as public/js/pointzi.js then
all you need to do is add the below script tag into your index.html file.
| <script src="public/js/pointzi.js"></script>
|
Step 2 - Pointzi initilization
For Pointzi to work properly you must initialize Pointzi in your root component.
The image below shows an example of the most common Angular root component.
Then in the app.component.ts file, you simply need to add the initialization code into
the ngOnInit method (as per the example below)
1
2
3
4
5
6
7
8
9
10
11
12
13 | ngOnInit(): void {
Pointzi.ready(function() {
// USER_ID is optional.
//You can set it later by sending user_id tag. It is a string tag that is used to identify the user.
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);
});
});
}
|
USER_ID is optional but recomended, it cal also be set later. For example, wherever you
identify the user to the analytics platform that you use, or when the user logs in.