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

When a customer leaves contact details, such as by submitting a lead form or signing up, send an event to associate visitor with the 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.

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 Shopify, allowing to create contacts there without having to build own API integration. Able also 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.