How to create a Custom Tracking with custom JavaScript code

This article provides a comprehensive overview of custom tracking, explaining its differences with the Action Trackers, and providing clear instructions and examples to help you set it up as a goal in AB Tasty.

A custom tracking in AB Tasty allows you to track specific user actions on your website that are not covered by default tracking options. This type of tracking is highly flexible and can be tailored to fit your unique requirements.

A custom tracking can be coded in JS and can be added in different places: campaign JavaScript, Variation JS, Account JS or in your Tag Management System. To know more about the differences between these, refer to this article.

Custom tracking can also be created via the DataLayer, for more information, refer to How to create a Custom Tracking via the DataLayer.

Differences with Action Tracker

Both custom tracking and Action tracker aims at monitoring user interactions, but they are used in different contexts:

Custom Tracking: requires additional coding and is used for more complex or specific actions that are not covered by the Action Tracker. Custom tracking aims to collect user data on pages that are not specifically targeted by a campaign and may have additional attributes that can then be found in the report (event category, event label, event value). Learn more

Use cases and code snippets

Custom tracking can be utilized in various scenarios. Below are some examples and corresponding code snippets to help you understand its implementation.

Example Use Case 1: Tracking Button Clicks

To track button clicks using the ABTastyClickTracking function, you can create the following code snippet which will be available for all your campaigns:

document.querySelector('#myButton').addEventListener(‘mousedown’, function() {
    ABTastyClickTracking('Button Click');
});

This snippet will track clicks on a button with the ID myButton and send the event with the name “Button Click” to AB Tasty.

To restrict this custom tracking to a specific campaign, you should use the ABTastyClickTracking function parameters:

document.querySelector('#myButton').addEventListener(‘mousedown’, function() {
    ABTastyClickTracking('Button Click', null, 123456);
});

This snippet will track clicks on a button with the ID myButton and send the event with the name “Button Click” to AB Tasty. This tracking will only be available for the campaignID 123456 and only visitors affected by this campaign will be able to send this event. 

If your campaign is a Multipage or a Personalization campaign, use the subtestID (or the scenarioID) instead of the global campaignID.

In case you want to add more information to your event, you can also use the following method:

window.abtasty.send("event", {
  ec: "Action Tracking",
  ea: "Button Click",
  el: "CTA on product page",
  ev: 1
});

Both methods are equivalent, but with ABTastyClickTracking there will be no event label.

Using the "Tracking Initialized" Method

When your custom code is not hosted in AB Tasty, you can use the Tracking initialized method to ensure your custom tracking is executed correctly and wait for the tracking to be initialized.

window.addEventListener('abtasty_trackingInitialized', function() {
document.querySelector('#myButton').addEventListener(‘mousedown’, function() {
ABTastyClickTracking('Clicks Add to Cart');
});
});

This method ensures that your custom tracking code runs once AB Tasty's tag is initialized.

Creating a Custom Tracking

To set up your custom tracking as a goal in AB Tasty, follow these steps:

  1. Access the Goals Management page and the custom tracking tab
  2. Click “Create a custom tracking” and then choose “From custom code” 
  3. Name your custom tracking: enter the name of your custom tracking exactly as it appears in your code. This step is crucial as it ensures that the tracking data is correctly associated with your goal.
  4. A code example for this custom tracking could be: 
document.querySelector('#myButton').addEventListener(‘mousedown’, function() {
ABTastyClickTracking('Clicks Add to Cart');
});

  1. Save the step
  2. In the ‘Goals’ step of your campaigns, the custom tracking should now be available. 

Don’t forget to QA your custom tracking before launching your campaign. To know more about how to QA a click tracking, refer to this article. 

This process aligns the custom tracking event name in your code with the goal name in the AB Tasty platform, ensuring accurate data collection and reporting.

Using the custom tracking

Once your custom tracking is created, it can be used as a goal for your reporting. To include it in your reportings:

  1. Go to the goal step of your campaign
  2. Choose “Custom Trackings”
  3. In the middle pane, you should see the custom tracking you created with the name you gave them (see first section)
  4. You can then drag and drop them as primary or secondary goals from here.
  5. Save.

Was this article helpful?

/