JavaScript and event tracking: Explanations and considerations

Retention Science's event tracking serves as the other "food" for our AI models, enabling us to learn how users are engaging with your website and what types of campaigns/recommendations/subject lines work best for them. (We would recommend having this guide open as you read through our core documentation here.)

Whether you are using Shopify, Magento, or custom HTML scripts this guide will help you understand our JavaScript event tracking and key details. (You can also watch our YouTube videos for similar explanations of data, JS, and other topics.) 

How do JS waves get implemented?

Shopify Clients

• Shopify JS is handled via these instructions, and can be setup in a few minutes.
• The only time a Shopify client has to do anything additional is when customizations are made to the site outside of Shopify:
  • Example - Search Bar is added via third party plugin, and you want to make sure every search term is passed to RS for analysis and Search Abandon Campaign follow ups.
  • Example -  form needs email capture via JS or Import API.

Magento Clients

• JS setup is even more automated and part of the Magento extension setup steps.
• Also similar to Shopify in the sense that additional effort is only needed in certain cases.
  • Example - Your Magento is using an AJAX Cart system that is not part of the standard extension support, so one script has to be added to "Add to Cart" buttons.

Custom Clients

• How this is setup depends on your tech stack:
  • Example - You may have a Google Tag Manager on your site with a sufficient datalayer, so all scripts/event triggers would be added there.
  • Example - You may have a singular page Angular app, so you might setup a new class for RS functionality.
• Key goal is to read through the documentation and the below and that should get you 90% prepared, and any Q&A/polishing can be done with your onboarding engineer. 

JavaScript Walkthrough

All of the JS events work in a similar fashion, so we'll start with the most basic scripts and then work upwards:

Shared concepts of all the events

• There is a static site ID that is always a string unique to your site, this is provided during your Onboarding Kickoff call.
• There is always an "if" condition to analyze if a user is logged in or not, and if they are you should add the user_id or email value in the wave as indicated in the code examples.
  • Only one is needed to ID the user.
  • We do cookie track users, so users that have browsed anonymously have past actions associated automatically if they ever log in or click on an email and land onsite.
• There is always a final "track" code line (static) which causes the event to be tracked.
• There is always the immediately invoked function at the end of each script which is required for the JS tracking to work.

Page View

• Outside of the normal shared concepts above, nothing special about this wave.
• It should be on every page on your website, as this also enables us to track every click the user performs and what pages they are most interested in (and browser/device information).
• Console Code (https://www.screencast.com/t/Q3vkWV36)
• Event Data (https://www.screencast.com/t/8Ycyp4cs6b)

Item Page View

• Nearly the same as "Page View" in terms of the code, but just adding one more line in to track the ID of the item the person is looking at.
  • This should match the ID of the item passed over from Data feeds.
• This event should fire on any page that is a singular item view
  • Example - if an item click loads an AJAX pop-up window of the item, you would want to fire this script on that click
• This event is what enables the "Browse Abandon" stage for users in Cortex.
• Console Code (https://www.screencast.com/t/eoLgx3C7gR)
• Event Data (https://www.screencast.com/t/KgXKDGtx3eB)

Add to Cart 

• Nearly the same as "Item Page View" above, but just adding one more line of code for setting of the action.
• This event should fire on any "Add to Cart" button on the site, and is what enables our "Cart Abandon" stage for users in Cortex.
• Console Code (https://www.screencast.com/t/sHfdXKVNZimC)
• Event Data (https://www.screencast.com/t/ZZUsIAWTI)

Shopping Cart View 

• Nearly the same as "Add to Cart" above, but instead of firing just one 'addItem' push, you loop through a collection of items and track each one.
• Fire the event when a person lands on their full shopping cart view page,
  • Or if you have an AJAX cart icon on the site that displays the full cart.
• Event Data (https://www.screencast.com/t/2G5ZjJYyRaf)

Checkout Success

• Similar to "Shopping Cart View" in that you are looping through all items, but has the addition of the 'addOrder' line where you should pass over the order details.
• Note we do have certain clients that don't have this data because the order ID is not generated until much later.
  • If you fall into this scenario, just ping your Onboarding Engineer and we can lift the requirement and further advise.
• Should trigger on the completion of the buy process on your website, and stops false Cart Abandon campaigns from going out to a user.

Checkout Success with Order data

• Exactly the same as above, except you can add more Order information into the wave.
• We do not recommend using this approach/event, and it is only available for backup scenarios when core data and API routes are not viable.

Search Abandon

• This event would trigger right as a person searches, or finishes searching
  • Enables the Search Abandon campaign, and is also good text analysis on Users for determining their interests.
• Key differences for this wave:
  • The 'setAction' sets an event of 'search.'
  • You're going to grab the value from the search bar and pass it as the 'search_term' as a string.
• Console Data (https://www.screencast.com/t/5rXoAGFEkqv)
• Wave Data (https://www.screencast.com/t/Io0BW5zFo3Za)

Custom Event

• Our event tracking is flexible and we allow our clients to make up events and then use for segmentation if they want to:
  • Example - "I want to track when people are signing up or looking at swatches instead of furniture."
  • Example - "I want to track people who watched a webinar and follow up with special abandons for them."
• All you have to do for this is fire the Custom Event wave code (minus the 'setParams' line), and use whatever action name you want for the 'setAction' call.

Email Capture Event

• See this article for even more detail.
• Recommendation is to use Import API over the JS