SDK Client

Our scripts expose SDK Client via `ppg.client` variable.

PushPushGo Scripts expose a powerful SDK Client that allows you to customize the behavior and flow of notifications on your website. This guide will walk you through setup, registration, beacon usage, and subscription management using the SDK client

Overview

The ppg.client object becomes available when the SDK Client is enabled and properly integrated. It provides functionality to:

Register and unregister subscriptions
Send custom data using beacons

This allows for advanced, programmatic control over how you interact with subscribers and track user behavior or actions.

Setup

Integrate PushPushGo scripts into your website.
Go to your PushPushGo Project Settings.
Toggle "SDK Client" to the enabled state.
Navigate to your website and open the browser console.
You should now see the ppg.client object available globally

console.log(ppg.client);

Basic Usage

Registering a Subscription

Use the register() method to create or retrieve a current subscription:

const subscriber = await ppg.client.register();

if (!subscriber) {
  console.log('No permission');
  return;
}

console.log('Permission granted');
console.log('Subscriber ID:', subscriber.id);

Working with Beacons

The SDK client allows you to send custom data through beacons—small, structured payloads that track events or attributes.

Using the Beacon builder

You can send a beacon using a fluent builder interface:

await subscriber.send((beacon) =>
  beacon
    .appendLabel("test")
    .appendLabel("test2", "my_label", "append", 1234)
    .removeLabel("test", "default")
    .setCustomId("123")
    .setField("aaa", "bbb")
);

Using a Beacon object directly

Alternatively, you can build a beacon manually and send it:

const beacon = subscriber.beacon();

await beacon
  .appendLabel("test")
  .appendLabel("test2", "my_label", "append", 1234)
  .removeLabel("test", "default")
  .setCustomId("123")
  .setField("aaa", "bbb")
  .send();

Unsubscribing a Subscriber

To remove a subscriber from your notification list:

await subscriber.unsubscribe();

Summary

With PushPushGo's SDK Client, you gain fine-grained control over your web push notification subscriptions and event tracking. Use it to:

Seamlessly manage subscription lifecycles
Attach meaningful labels and data to subscriber actions
Integrate custom tracking and analytics via beacons

For more information, consult your project settings or contact PushPushGo support at support@pushpushgo.com.

Use cases

With the SDK client configured, except from basic subscription to web push notifications, you can use it to create your own component for subscribing to web push notifications, segment your subscribers with tags, link them with your CRM database by setting custom id, or send data for automation purposes.

subscribe.js


let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add subscriber tags</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('load', function() {
    
    subscribe()
      .then(() => Promise.all([
        client.appendTags(['Demo tag', 'Other demo tag']),
        client.appendTags(['label:tag']),
      ]))
      .then(() => client.send());
  
  });
</script>
</html>

sw.js

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');

Send automation data

When you have automation configured in the app.pushpushgo, you will need to feed it with data, by sending a beacon by client.send() . Assume you have a selector with a name basket defined in the application, and you need to set it's value for the automation. In addition lets operate on tags that might be used in automation conditions and set the Custom ID.

subscribe.js

let client;

function getClient() {
  if (!client) {
    const config = {
      projectId: $projectId,
      isHTTPS: $isHTTPS,
      vapidPublicKey: $vapidPublicKey,
      endpoint: 'https://api.pushpushgo.com',
    };

    client = new ppg.sdk.Client(config);
  }
  return client;
}

function subscribe() {
  getClient()
    .isPushSupport()
    .then(() => client.isSubscribed())
    .then(isSubscribed => {
      if (!isSubscribed) {
        return client.register();
      } else {
        return client.getId();
      }
    })
    .catch(() => console.log('push is not supported'));
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set automation data</title>
    <script src="https://cdn.pushpushgo.com/scripts/sdk.js"></script>
    <script type="application/javascript" src="subscribe.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('load', function() {
  
    subscribe()
      .then(() => Promise.all([
        client.setSelector('basket', 19),
        client.appendTags(['Some condition tag', 'Other demo tag']),
        client.addTagsToRemove(['label:tag']),
        client.setCustomId('SomeIdentifier')
      ]))
    .then(() => client.send());
    
  });
</script>
</html>

sw.js

importScripts('https://cdn.pushpushgo.com/$projectId/worker.js');