Capacitor installation instructions

Note

July 2022 - we have ceased to support Ionic/Cordova/Capacitor. This documentation remains for existing customers.

Requirements

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

The Capacitor NPM is available here https://www.npmjs.com/package/capacitor-plugin-pointzi

Integration Steps

Step 1 - Install dependencies

Install dependencies for Contextual plugin.

npm i com.darktalker.cordova.screenshot
npm i cordova-plugin-app-version
npm i cordova-plugin-device
npm i cordova-plugin-device-name
npm i cordova-plugin-dialogs
npm i cordova-plugin-network-information

Step 2 - Installation

Install Contextual in your Capacitor project. Run this command in a console.

npm i capacitor-plugin-pointzi

Step 3 - Setup assets

You need copy asset files of plugin into your dist folder with following structure "/capacitor-plugin-pointzi/assets/". For example:

https://localhost/capacitor-plugin-pointzi/assets/example.png

You can do that by edit your build configuration file. Assume that you are using angular, so you put this code into assets configuration section inside angular.json:

{
  "glob": "**/*",
  "input": "node_modules/capacitor-plugin-pointzi/src/assets",
  "output": "./capacitor-plugin-pointzi/assets"
}

When you have done, it looks like:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/capacitor-plugin-pointzi/src/assets",
                "output": "./capacitor-plugin-pointzi/assets"
              }
            ]
          }
        }
      }
    }
  }
}

Step 4 - Contextual initialisation

Add this code into constructor of your root component. For example, assuming you use angular, your root component file is app.component.ts.

import { Plugins, StatusBarStyle } from '@capacitor/core';
import 'capacitor-plugin-pointzi';

const {Pointzi} = Plugins;

export class AppComponent {
  constructor(private platform: Platform) {
    this.initializeApp();
  }

  async initializeApp() {
    Pointzi.load().then(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 () {
        // Example of sending a string Tag
        Pointzi.tag({
          key: 'first_name',
          string: 'My First Name',
        });
      });
    });
  }
}

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 a 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";
Pointzi.tag.string(key, value);

Numeric Tags

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

Datetime Tags

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

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

Increment Tag Value

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

---

Last update: 2022-07-20