(888) 310-0589 x2
For sites that have fairly dynamic rendered content that might change frequently or non-traditional page navigation techniques, the following tips and code snippets outline multiple approaches to ensuring a successful integration with the Evergage Beacon.
Expose window level boolean returned by
When React determines if it needs to update components, it runs the
shouldComponentUpdate hook. Returning false prevents the component from re-rendering.
By attaching the function
lockForEvergage to the DOM Element we can effectively set the return value of shouldComponentUpdate from the window, which can be manipulated in any Evergage Campaign.
This allows Evergage messages to be present in any part of the page without unique code per message target.
props.childrenmethod of defining children may rerender due to changes to the parent's model. There may be cases where this is desired (navigation), and other's where it is not (close an icon in one child removes it from the parent's
props.children, causing a re-render for all children of the parent).
This method should not be used on route dependent elements.
Expose window level accessible setter for component state
This method allows Evergage to modify stores, so that existing components render with data provided by Evergage.
The rendering is thus handled by React, and there are no concerns of re-rendering unless the application updates the same stores.
Provides predefined empty space that will not rerender for Evergage to place a message.
Evergage functionality will work out of the box when targeting these elements specifically.
Single Page Applications
For single page applications, Evergage needs to know when it should track a page navigation event. Most modern browsers support a combination of these mechanisms for tracking page navigation with Single Page Applications:
You'll need to update the Evergage configuration for your site with the following settings to take advantage of this integration:
- From the Evergage Web App, navigate to Settings > General Setup > Advanced Options
- In the section Treat Hash Changes in Location as New Page load, select the option
Evergage Component Integration and Server Side Rendering
Evergage also provides Custom Component Integrations for the following campaign message types:
- In-Line Messages
The current libraries are in preview. Please contact your Account representative for more detailed information and access to this option.
With Item Templates Via The Evergage Web App
This option utilizes the item template that you create via the Visual Editor or the Evergage Web App. The configuration options that you set on the targetted element will apply to the
Recommendations component target element.
With Custom Rendering Based Upon Evergage Promoted Items Response
This option uses the list of promotedItems in the Evergage Campaign response, to which you can style with your own templates or settings in your web application. This option will ignore any style or item template configuration configured in the Evergage Web App.
You'll need to configure your Evergage dataset with Single Page Application configuration options.
Access these configuration options via the Evergage Web App:
- From the Evergage Platform, navigate to Settings > General Setup > Advanced Options
- Select Treat Hash Changes in Location as New Page Load
Create a Web Recommendations Campaign that is set up for recommendations in the Evergage Platform.
Pay close attention to the selector you specify in SETUP > Experiences > Messages, as you will need to use this as the
target of your
This will be the value you pass into your
Recommendations component in Message Settings.