Embedding Convert

How to integrate conversion campaigns with your application or site

Step 1 — Embed the snippet

To get started with conversion campaigns you'll need to add the embed snippet to your application or website.

You can find the embed snippet in the Campaigns screen or in Settings → Convert.

Copy the snippet and insert it just before the closing </head> tag in your application or website.

Step 2 — Initialize Convert

Next, Convert needs to know the ID of the subscription from your connected subscription platform to identify each subscriber as they visit your website or use your application.

Once you've added the embed snippet, call the ProsperStack.convert.init() method with the ID of the subscription from your platform to complete the Convert initialization.

For example:

document.addEventListener("DOMContentLoaded", () => {
  window.ProsperStack.convert.init({
    subscription: {
      platformId: "sub_H6X0WYrAzq2iGk",
    },
  });
});

Once the init() method is called, ProsperStack will initialize your Convert campaigns and begin displaying offers, unless the campaign is configured to trigger manually. For manually triggered campaigns, see Step 3.

Specifying a campaign

You can specify the conversion campaign to initialize with the campaignId property. For example:

document.addEventListener("DOMContentLoaded", () => {
  window.ProsperStack.convert.init({
    campaignId: "cmpn_HsCgNwZxBe3fR9qVXEaCbB7H",
    subscription: {
      platformId: "sub_H6X0WYrAzq2iGk",
    },
  });
});

If no campaignId is specified, your default campaign will be used.

Sending custom properties

Custom properties allow you to attach custom data to your subscriber and subscription objects for more powerful targeting and segmentation.

You'll need to create custom properties in ProsperStack before storing values in them. Learn more about managing custom properties.

Specify custom properties to attach to either a subscriber or subscription with the properties object. Use an object with the unique identifier of the property as the key, for example:

{
  number_of_contacts: 5800,
  is_professional: true,
  last_contacted: "2021-05-04",
  preferred_name: "Johnny"
}

Here's an example of initializing Convert with custom properties:

window.ProsperStack.convert.init({
  subscription: {
    platformId: "sub_H6X0WYrAzq2iGk",
    properties: {
      is_professional: true,
      num_contacts: 5800,
    },
  },
  subscriber: {
    properties: {
      preferred_name: "Johnny",
    },
  },
});

Learn more about formatting values for custom properties.

Handling events

The init() method provides the following callbacks to monitor offer events:

• onOfferPresented?: () => void

  Called when an offer is presented.

• onOfferClosed?: (result: CampaignResult) => void

  Called when an offer is closed. The result object contains a status property with one of the following values:

  • accepted — The subscriber accepted the offer.
  • dismissed — The subscriber dismissed the offer. The offer can be shown again after a delay.
  • declined — The subscriber declined the offer. The offer will not be shown to the subscriber again.
  • expired — The offer expired.

Here's an example of handling offer events:

document.addEventListener("DOMContentLoaded", () => {
  window.ProsperStack.convert.init({
    campaignId: "cmpn_HsCgNwZxBe3fR9qVXEaCbB7H",
    subscription: {
      platformId: "sub_H6X0WYrAzq2iGk",
    },
    onOfferPresented: () => {
      console.log("Offer presented");
    }
    onOfferClosed: (result) => {
      console.log("Offer closed with status", result.status);
    }
  });
});

Step 3 — Triggering manual campaigns

Note

This step is only required if the campaign is configured to trigger manually.

If the initialized campaign is configured to trigger manually, you can trigger the campaign by calling the ProsperStack.convert.trigger() method.