Tracking in React, Vue.js and other SPA frameworks

Able Customer Data Platform simplifies implementation of tracking in modern React and Vue.js applications. Able replaces multiple APIs that need to be integrated on both front-end and back-end, providing a convenient way to streamline implementation of capturing Google Analytics, Google Ads and Facebook Ads tracking ids, associating them with leads and users and sending conversions to the respective APIs when they occur on the back-end.

This page contains instructions for custom scripting of page view and browser event tracking.

For most non-SPA funnels, the 'Get Code' tab in the Able CDP Dashboard can be used to generate tracking code automatically, instead of the manual instructions.

Tracking Page Views

Add following code to the website to track website events:

<script type="text/javascript" src="https://app.ablecdp.com/ue.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
  	uipe('init', '%%FUNNEL_MARK%%')
    uipe('track', 'PageView')
  })
</script>

Where %%FUNNEL_MARK%% - is the unique code of your Able CDP Funnel.

The 'Get Code' tab in the Able CDP Dashboard can be used to generate page view tracking code automatically.

In addition to tracking page views, this code initializes a global window.uipe function that is used to integrate with Able.

Able CDP page view tracking doesn't install its own cookies and relies on third-party identifiers such as Google Analytics Client Id to connect customer activity between website pages. Please enable cross-domain measurement in Google Analytics if your landing and lead/order pages are hosted on different domains.

Tracking Lead Forms and Sign-ups

Due to the nature of single-page applications, automatic and secure tracking of sign-ups in them requires integrating tracking code manually. This is necessary to inform Able when a user signs up so that the email or another user identifier can be linked with the browser session, enabling the attribution of further conversions to the customer's source.

This also applies to web application sign-ups that use a single-sign-on widget, as provided by Google or Facebook.

To inform Able of visitors' identity, send an event to associate the visitor with their contact details. For example:

window.uipe('track', 'Lead', {
  keys: {
    email: customer.email,
    phone: customer.phone,
  }, 
  lead: {         
    firstName: customer.firstName,    
    lastName: customer.lastName  
  },
})

See the Send Events Using Webhooks document for detailed description of possible keys and other event parameters.

Depending on your sign-up flow, this event can be sent either:

1. When a customer leaves contact details, such as by submitting a lead form or signing up.
2. When a customer accesses the application for the first time. This is especially useful if you're using a single sign-on and some users sign-up without ever entering their email in a form.

While form tracking is used primarily to associate customer details with the visitor, Able also offers integrations with CRMs and marketing automation platforms such as ActiveCampaign and Salesforce, allowing to create contacts there when a new lead form is submitted without having to build own API integration. When doing so, Able populates custom attributes such as referrer URL and UTM tags using built-in first-party attribution.

If you have a standalone marketing website in addition to a SPA application, install tracking code using the instructions on Track Website Visitors and Forms page to track the entire funnel.

If standalone marketing website doesn't have a sign-up form, but has landing pages linking to the sign-up form within the applications, make sure that Google Analytics cross-domain is set up between the marketing website and the application domains. Able uses Google Analytics Client Id to track visitors between domains, including for our built-in attribution and other integrations such as Google Ads and Facebook Ads.

Please contact Able CDP support if you need any help with the form tracking set up.

Tracking Purchases

The biggest benefit Able provides is ability to attribute purchases that happen on the back-end to front-end visitors, Google Analytics Click Ids, Google Ads and Facebook Ids click id, as well as integrate with respective conversion APIs.

Able is already integrated with popular order processing back-ends such as Stripe and WooCommerce. Alternatively, events can be sent from your own back-end to Able REST API.

Able will attribute them to known customer details automatically and will send conversion events to the external services' APIs.