Playbooks

Implementing Moments via the Moments JS SDK (Embedded)

AdsPostX is now MomentScience! 🎉

We have rebranded AdsPostX to MomentScience. All the latest documentation and updates can now be found at MomentScience Documentation.

Goal

To fully implement the Moments JS SDK as an embedded unit inside your web page or inside a webview in a mobile app.

Background

By default, the AdsPostX Moments JS SDK (out of the box) has the following characteristics:

  • shows a single Offer at a time in a sequence
  • displays in a modal (pop-up) container

Default JS SDK Implementation

Default Modal Popup
Default Modal Popup


Desired Implementation as an Embedded Unit

Embedded
Embedded


Steps

Step 1. Identify/create the div element on your page

Identify or create a <div> element on your page that will serve as the container that holds the AdsPostX unit.

HTML


Step 2. Copy & paste the Moments JS SDK code snippet

Obtain the Moments JS SDK from the AdsPostX publisher dashboard following the guide below and paste into the <HEAD> section of your web page.

Step 3. Enable Embedded Mode

To configure the JS SDK to operate in Embedded Mode, modify the code snippet using by following the guide below. You will also be able to configure additional embedded options as indicated in this guide.

Step 4. Customize the interface and behavior

Once you've followed the steps above, you should have an embedded AdsPostX unit on your site - but it may not match your desired style guides (colors, etc). To better match your overall user experience, AdsPostX provides a convenient way to change these settings directly from the AdsPostX dashboard.

Log into the AdsPostX dashboard -> Visit Integrations -> Select your integration type, and select Configure Then, follow the steps as indicated.

Configuring the AdsPostX user experience
Configuring the AdsPostX user experience


Step 5. Change the number of ads (and other properties)

In addition to stylization, the AdsPostX Dashboard also allows you to specify how many Offers to present at a time without any code changes.

Once logged into the AdsPostX dashboard, visit Settings and then select Configurations.

Changing the number of ads from the Settings/Configuration screen
Changing the number of ads from the Settings/Configuration screen


Step 6. Pass payload values for targeting, reporting and personalization (optional)

Your implementation of AdsPostX can be enhanced or optimized by passing payload information when the AdsPostX unit is loaded.

Values passed into the payload may be used by our platform to target Offers more effectively to generate higher yield. They can also be used for reporting to differentiate performance on multiple dimensions or to personalize the Moments experience.

Further Recommendations

Use macros to personalize your Moments

Payload values can also be passed in as macros when setting up the stylization of your Moments unit (as described earlier in this guide) - this is helpful if you would like to personalize your user's experience.

{{firstname}}, {{confirmationref}}, and {{amount}} are used as macros.  Be sure to pass in payload values for this to function correctly.
{{firstname}}, {{confirmationref}}, and {{amount}} are used as macros. Be sure to pass in payload values for this to function correctly.


Based on the configuration as shown in the image above, the resulting experience looks as follows:

Document image


Utilizing Callback functions

The Moments JS SDK accepts a callback function that will be invoked at various points during the lifecycle of the SDK. This allows you to better tailor the user experience or to inform your own internal tracking metrics.

Postbacks

Consider using postbacks to get real-time events on conversions based on your Offers.