Before you begin, you’ll need to extend the Analytics Manager connector for Monetate by following the instructions in our Monetate setup guide.
Previewing a PWA with Monetate #
Here’s how to preview your PWA with a Monetate experience:
Run Mobify Preview on your desktop site with the All Tabs option turned on.
Login to your Monetate account
- Create a new Action, Event, or Target
Note: To stop Mobify Preview, click on the Clear Preview Cookie with the Site URL filled in.
Creating Monetate actions
When creating Monetate actions, always make sure the Re-check for Elements option is turned on when available.
- Inserting CSS or background images - Monetate inserts CSS rules at a global level and doesn’t remove them. If we manually remove the injected CSS, it will not be re-injected when a PWA navigation happens.
- Moving / Swapping DOM elements - This is assuming Monetate is moving existing HTML from the PWA. These types of actions can get into a race condition when the PWA is rendering a piece of content and Monetate moves it before the HTML element is ready.
- Lightbox - You won’t able to get a lightbox to show more than once.
- Countdown timers - This plug-in is built into Monetate. Mobify hasn’t fully vetted its compatibility with PWAs yet.
Custom experience integrations #
Custom interaction with the PWA
Sometimes you might want to have Monetate interact with the PWA. For example:
- Adding a product to cart when the user clicks on HTML elements that were injected by Monetate and showing a modal to confirm that the product was added to cart
- Applying a discount code automatically when the user clicks on an HTML element that was injected by Monetate
- Displaying content injected by Monetate using the Sheet component
The example scenarios above all require custom PWA actions that can be exposed using the ExposeApiBase component.
In-project A/B Split Testing
This is a scenario where the split implementation exists in the PWA but the decision to split is made by Monetate with the use of document cookies.
If you need to render components based on the cookie value, use the Split component.
If you need to obtain the cookie value anywhere else, use the Cookie Manager