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 n(){var e="https://sdk.pointzi.com/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+"?v="+(new Date).getTime(),t.body.appendChild(n)}),r.forEach(function(e){var n=t.createElement("script");n.async=!1,n.src=e+"?v="+(new Date).getTime(),t.body.appendChild(n)})}"function"==typeof jQuery?jQuery("document").ready(function(){n()}):n(),e.streethawk=e.streethawk||{ready:function(t){var n=0,r=setInterval(function(){if(e.streethawk.register||600==n)return clearInterval(r),void(600==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 n(){var e="https://sdk.pointzi.com/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+"?v="+(new Date).getTime(),t.body.appendChild(n)}),r.forEach(function(e){var n=t.createElement("script");n.async=!1,n.src=e+"?v="+(new Date).getTime(),t.body.appendChild(n)})}"function"==typeof jQuery?jQuery("document").ready(function(){n()}):n(),e.streethawk=e.streethawk||{ready:function(t){var n=0,r=setInterval(function(){if(e.streethawk.register||600==n)return clearInterval(r),void(600==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)

    ngOnInit(): void {
     streethawk.ready(function() {

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

SH_CUID 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.

Note

Make sure you replace APP_KEY and EVENT_KEY with your own. Visit https://dashboard.pointzi.com/#/setting -> API tab.