Support for AJAX-based Websites and Checkouts

DWQA QuestionsCategory: API + IntegrationsSupport for AJAX-based Websites and Checkouts
Charley Support Staff asked 4 years ago
1 Answers
answered 4 years ago

Supporting AJAX Websites

Having an AJAX website dynamically populate content on your website can open up some great possibilities, but can pose challenges when it comes to supporting scripts that rely on a traditional page load on each user click. Rekko Marketing Cloud and Charley support AJAX-based sites which will allow you to more fully take advantage of our robust segmentation system and content delivery options.

Let’s Dive Right In
In general convert.init() is called to initialize scripts on new page loads. We then deliver the campaigns that satisfy the profiles/triggers at the time the page loads. If you have an AJAX-based site, you probably don’t load new pages on each visitor click; you’ll need an alternative way to kickstart the campaign evaluation process with Rekko/Charley.

So for AJAX-based sites to work with Rekko/Charley, you can explicitly call a page change event to trigger campaign delivery by calling the script:

convert.reinit()
This signals us to evaluate profiles and setup new campaign delivery; just as if a visitor had initiated a page change. We pick up any change in the page URL and update the visitor record with a new page entry. We simultaneously deliver any campaigns that satisfy the profiles for delivery.
Every call to convert.reinit() script gets treated as a new page as far as we’re concerned and all campaigns will be processed and delivered as they would be on a non-AJAX based site.

What happens to the custom fields and cart variables populated?
Any custom profile fields and cart variables loaded on the page prior to convert.reinit() call will be re-posted to our servers after convert.reinit call is made.

If you wish to reset those fields, and not re-post them, then you must clear those fields before making the convert.reinit() call. The following code clears the convert_profile and convert_cart variables.

window.convert_profile = {};
window.convert_cart = {};
window.convert_cart.shoppingCartItems = new Array();

What happens to the product page tagging?
On a product detail page, you can pass the current product SKU and current product category to our servers using convert_productCode and convert_productCategory fields. It helps us track visitor shopping behaviors and build recommendations for those visitors. After the page change event, if the visitor is on a new product page, then the above two variables have to be populated with values corresponding to the new product. If the visitor moves out of a product page, you can reset those values as follows

window.convert_productCode = "";
window.convert_productCategory = "";