Web Analytics

Palzin Track Web SDK

Installation

You can use Palzin Track Web SDK by adding the following script tag to your HTML file to install the web library. Please don't forget to update the TOKEN and PROJECT ID values with your own values.

<script 
    async="true" 
    src="https://palzin.live/rel/v1.0/trck/pt.js" 
    data-project-id="<YOUR_PROJECT_ID>" 
    data-api-key="<YOUR_PUBLIC_API_TOKEN>" 
    data-auto-track="true"
    data-cache="true"
    data-domains="mywebsite.com,mywebsite2.com"
></script>

Palzin Track provides several properties that allow you to configure its behavior.

data-project-id and data-api-key (required)

By default, Palzin Track will send data to wherever the script is located. You can override this to send data to another project with its appropriate API TOKEN. You will need to change the value of data-project-id and data-api-key.

Usage:

<script
    defer
    src="https://palzin.live/rel/v1.0/trck/pt.js"
    data-project-id="<YOUR_PROJECT_ID>" 
    data-api-key="<YOUR_PUBLIC_API_TOKEN>"   
></script>

data-auto-track

By default, Palzin Track tracks all pageviews and events for you automatically. You can disable this behavior and track events yourself using the Web SDK Functions.

Usage:

<script
    defer
    src="https://palzin.live/rel/v1.0/trck/pt.js"
    data-project-id="<YOUR_PROJECT_ID>" 
    data-api-key="<YOUR_PUBLIC_API_TOKEN>"   
    data-auto-track="false"
></script>

data-cache

If you get a lot of pageviews from the same user, for example in a forum website, you can cache some data to improve the performance of the tracking script.

Note: This will use session storage so you may need to inform your users._

Usage:

<script
  defer
    src="https://palzin.live/rel/v1.0/trck/pt.js"
    data-project-id="<YOUR_PROJECT_ID>" 
    data-api-key="<YOUR_PUBLIC_API_TOKEN>"
    data-cache="false"
></script>

data-domains

If you want the tracker to only run on specific domains, you can add them to your tracker script. This is a comma delimited list of domain names. Helps if you are working in a staging/development environment.

Usage:

<script
  defer
    src="https://palzin.live/rel/v1.0/trck/pt.js"
    data-project-id="<YOUR_PROJECT_ID>" 
    data-api-key="<YOUR_PUBLIC_API_TOKEN>"
    data-domains="mywebsite.com,mywebsite2.com"
></script>

Google Tag Manager

Google Tag Manager will strip the attributes from the tracker, so you can bypass this by using the format below.

<script>
  (function () {
    var el = document.createElement('script');
    el.setAttribute('src', 'https://palzin.live/rel/v1.0/trck/pt.js');
    el.setAttribute('data-project-id', '<YOUR_PROJECT_ID>');
    el.setAttribute('data-api-key', '<YOUR_PUBLIC_API_TOKEN>');
    document.body.appendChild(el);
  })();
</script>

Note: Please ensure that your token is set to "Public" and its roles are limited to the project you're tracking.

Tracker Functions

The Palzin Track Web SDK tracker exposes a function that you can call on your website if you want more control over your tracking. By default everything is automatically collected, but you can disable this using data-auto-track="false" and sending the data yourself.

See Web SDK Configuration.

Functions

pt.track([payload]);

pt.track(event_name, [event_data]);

Pageviews

Tracks a page view.

pt.track();

By default the tracker automatically collects the following properties:

• hostname: Hostname of server
• language: Browser language
• referrer: Page referrer
• screen: Screen dimensions (eg. 1920x1080)
• title: Page title
• url: Page url
• ip: User IP Address

If you wish to send your own custom payload, pass in an object to the function:

pt.track({ screen: '1920x1080', url: '/home', title: 'Home page' });

The above will only send the properties screen, url and title. If you want to include existing properties, pass in a function:

pt.track(props => ({ ...props, url: '/home', title: 'Home page' }));

Events

Tracks an event with a given name.

pt.track('signup-button');

Event Data

Tracks an event with dynamic data.

pt.track('signup-button', { name: 'newsletter', id: 123 });

When tracking events, the default properties are included in the payload. This is equivalent to running:

pt.track(props => ({
  ...props,
  name: 'signup-button',
  data: {
    name: 'newsletter',
    id: 123,
  },
}));

Event Data Limits

Event Data can work with any JSON data. There are a few rules in place to maintain performance.

• Numbers have a max precision of 4.
• Strings have a max length of 256.
• Arrays are converted to a String, with the same max length of 256.
• Objects have a max of 50 properties. Arrays are considered 1 property.

Initialization

This library requires a user id to be set before it starts tracking your events. You can set the user id by calling the window.pt("setUserId", "<USER_ID>") function. For example, you could set the user id to the user's email address. Once you've set the user id, Palzin Track will start tracking page views and all custom events with the specific user. For e.g. You can use email address, Phone No, etc that can be represented as a Unique Identification for your customers, subscriber, tenants, users, etc.

<script>
  pt.identify("<User Identity ID>", { name: 'bhavik', id: 123 });
</script>

Tracking Events

Tracking custom events is as simple as defining a data attribute on any element. For example, let's track when a user upgrades their plan.

<button
  data-pt-event="Upgraded Plan"
  data-pt-event-channel="billing"
  
>
  Upgrade to Pro
</button>

Custom Properties

You may add custom properties to your events by defining a data attribute on any element. Remember, the only required property is data-event, everything else is optional.

<button
  data-pt-event="Upgraded Plan"
  data-pt-event-userid="user-123"     // optional (optional when set using window.ls)
  data-pt-event-channel="billing"      // optional (defaults to "events")
  data-pt-event-icon="💰"      // optional
  data-pt-event-tag-plan="Pro"         // optional
  data-pt-event-tag-period="Monthly"   // optional
  data-pt-event-tag-price="9.99"       // optional
>
  Upgrade to Pro
</button>