Track Custom Browser Events

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

For most funnels, the 'Get Code' tab in the Able CDP Dashboard can be used to generate form tracking code automatically, instead of the manual instructions on this page.

If you need to track custom events with GTM, consider reviewing our guide to tracking forms and other events in GTM.

If you're using a modern JavaScript framework like React.js or Vue.js, refer to our guide to tracking in single-page applications instead.

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.

You may skip this step if you've installed automatically generated tracking code from the Get Code section as it includes the snippet above.

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. This behavior can be modified by enabling the 'storeid' parameter, which will store the identifier in the LocalStorage by adding the following snippet before calling uipe('init', ...):

window.uipeParams = { setid: true, storeid: true };

Tracking Lead Forms and Other Conversions

When a visitor leaves contact details, such as by submitting a lead form or signing up, send Lead event to associate visitor with the contact details. For example:

<script>
var uipe_form = document.querySelector(`form`)
if (uipe_form) {
  uipe_form.addEventListener('submit', function () {
    uipe('track', 'Lead', {
      keys: {
        email: uipe_form.elements['email'].value,
        phone: uipe_form.elements['phone'].value,
      },
      lead: {
        firstName: uipe_form.elements['name'].value,
      },
      message: uipe_form.elements['message'].value,
    })
  })
}
</script>

Used event name can vary as required; no prior configuration is required to track custom events.

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

We also have special instructions for tracking Hubspot Forms and Shopify leads and purchases.

The exact way how tracking of leads and sign-ups should be done depends on the implementation of the form you're using to capture leads.

We appreciate that this approach makes it a little harder to install the lead tracking code. We chose to use it as it gives our customers full control over the data that are sent to Able, as well as allows you to achieve best in-browser performance. Please contact Able CDP support if you need any help with the form tracking set up.