Implementing Moments via the Moments JS SDK (Embedded)
This playbook serves as a comprehensive guide for implementing the MomentScience Moments JS SDK as an embedded unit within your web page or mobile app. The goal is to provide detailed instructions and best practices to help you maximize revenue and enhance customer engagement post-transaction.
MomentScience Moments JS SDK is designed to integrate seamlessly into your existing web infrastructure. It provides a powerful tool to deliver personalized offers to your customers at crucial moments in their purchasing journey. By embedding the SDK, you can transform the post-transaction experience into an opportunity for increased engagement and revenue.
- Personalized Offers:Deliver targeted Offers based on user data to increase relevance and engagement.
- Embedded Mode:Integrate Offers directly into your webpage or app for a seamless user experience.
- Customization Options:Use the MomentScience dashboard to easily tailor the appearance and behavior of your Offers.
- Advanced Targeting:Enhance your targeting capabilities by passing payload values and using macros for personalization.
- Real-time Tracking:Implement postbacks and callback functions to track user interactions and conversions in real-time.
By default, the MomentScience Moments JS SDK has the following characteristics:
- Single Offer Display: By default, the SDK shows one Offer at a time in a sequential manner.
- Modal (Pop-up) Container: The Offers are displayed in a modal or pop-up container. This modal appears over the current content on the page.
Default JS SDK Implementation
Desired Implementation as an Embedded Unit
To implement the MomentScience Moments JS SDK as an embedded unit on your web page or inside a webview in a mobile app, follow these detailed steps:
1. Identify or Create a <div> Element:
- Determine where you want the MomentScience unit to be displayed on your page.
- Create a <div> element that will serve as the container for the MomentScience unit.
Example HTML:
- Obtain the SDK Code:
- Log in to the MomentScience dashboard and navigate to the JS SDK Integration section to obtain the Moments JS SDK code snippet.
- Insert the SDK Code into Your Web Page:
- Paste the obtained SDK code into the <head>section of your web page to ensure it loads correctly.
1. Configure the SDK for Embedded Mode:
- Modify the SDK initialization code to specify that it should operate in Embedded Mode.
Once you've followed the steps above, you should have an embedded MomentScience unit on your site - but it may not match your desired style guides (colors, etc). To better match your overall user experience, MomentScience provides a convenient way to change these settings directly from the MomentScience dashboard.
- Access Customization Options:
- Click on "JS SDK", then click "Configure".
- Adjust Appearance and Behavior:
- Use the dashboard settings to customize the look and feel of the MomentScience unit to match your siteβs design guidelines.
- Modify Display Settings:
- Adjust the "Number of Ads" to control the number of Offers to present at a time as needed without changing the code.
Enhancing or optimizing your implementation of MomentScience can be achieved by passing payload information when the MomentScience unit is loaded. This additional data allows the platform to:
- Target Offers More Effectively:Using payload values helps MomentScience deliver more relevant offers to users, increasing the chances of conversion and overall yield.
- Improve Reporting:Payload values can be utilized to segment and analyze performance across different dimensions, providing deeper insights into how various user groups interact with your offers.
- Personalize the Moments Experience:By passing specific information about users, you can tailor the content and presentation of Offers to better meet individual preferences and behaviors.
To maximize the effectiveness and efficiency of your MomentScience Moments JS SDK implementation, consider the following best practices and advanced techniques:
Macros can be used to dynamically insert user-specific data into your Offers, enhancing personalization and relevance. Common macros include user names, order references, and purchase amounts.
The Moments JS SDK supports callback functions that can be triggered at various points in the Offer lifecycle. This allows for greater control over user interactions and can be used to integrate with your internal tracking systems.
Postbacks provide real-time data on conversions related to your Offers. They are essential for tracking the effectiveness of your campaigns and optimizing them for better performance.
π’ If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.comο»Ώ