Adding elements to your experience creates net new elements on your page, which means that by default, nothing will be tracked about how users interact with that element. Of course, your experience analytics will measure how well the entire experience performed, but there may be instances where you want to better track when users click on your added elements. Below, we’ll talk about how to add this tracking to your added elements.
Event listeners
In order to add tracking to these elements, we’ll use a custom javascript concept called event listeners. Event listeners are exactly what they sound like (pun intended) - it allows you to wait (or listen) until specific events happen and then use that action to trigger something else. The easiest example of this is a click listener added to a button. If you want to trigger something to happen when a user clicks a button, you can add a click listener like this:
//Select the button element.
const element = document.querySelector('button');
//Add the click listener.
element.addEventListener("click", function() {
//Define what should happen when someone clicks the element.
console.log('hello')
});
Tip: This document covers just click events, but you may want to explore other events. A full list can be found here.
Adding event listeners to added elements
With Mutiny, you can use element-level custom javascript to attach event listeners to your added elements. Once you’ve added an element, select the “Code” dropdown, and then “Open Code Editor”. Once there, you can add the event listener code into the code editor. Because this is already adding code directly to the element, you won’t need to select the element like we did above. You can just add this code and click “Apply”:
element.addEventListener("click", function() {
console.log('hello')
});
In the above example, we’re only creating a console log when a user clicks. Below, we’ll talk about how you may want to track conversions.
Tracking clicks to Mutiny
You can add this code to track a specific conversion event in Mutiny when a user clicks your added button (you can update the name to whatever you’d like).
element.addEventListener("click", function() {
window.mutiny.client.trackConversion({ name: 'clicked-added-button' })
});
Tracking clicks to Segment
Presuming you have properly installed Segment onto your website, you can send a [track](https://segment.com/docs/connections/spec/track/) event when a user clicks your added button (you can update the event name and properties to whatever you’d like).
element.addEventListener("click", function() {
analytics.track("Clicked Added Button", {
buttonName: "Secondary Product Page",
});
});
Tracking clicks to Amplitude
Presuming you have properly installed Amplitude onto your website, you can send an event when a user clicks your added button (you can update the event name and properties to whatever you’d like).
element.addEventListener("click", function() {
amplitude.track("Clicked Added Button", {
buttonName: "Secondary Product Page",
});
});
Tracking clicks to Google Tag Manager
Presuming you have properly installed Google Tag Manager onto your website, you can push an event to the dataLayer when a user clicks your added button. You can then use the dataLayer event in Google Tag Manager to trigger other events, such as Google Analytics events (you can update the event name to whatever you’d like).
element.addEventListener("click", function() {
dataLayer.push({'event': 'clicked_added_button'});
});
Comments
0 comments
Please sign in to leave a comment.