Introduction
The after-tracked-click event is a powerful feature in Wisepops' JS callbacks system. It fires after the conversion of a popup, allowing you to execute custom actions or modify behavior after a user interacts with specific elements.
Event trigger conditions
The after-tracked-click event is triggered when a user clicks on the following elements (if the "track click" option is enabled):
Call-to-action (CTA)
Multiple Calls-to-action
Image
Link in a text block
Links in HTML blocks with the class
wisepops-track-click
Note: Signup forms do not trigger this event. For form submissions, refer to the after-form-submit event.
Basic usage
Here's a basic example of how to listen for the after-tracked-click event:
wisepops('listen', 'after-tracked-click', function(event) {
// Your custom code here
});
Preventing default action
You can prevent the default action (e.g., loading a new page, scrolling to an anchor, closing the popup) by calling preventDefault() on the event:
wisepops('listen', 'after-tracked-click', function(event) {
event.preventDefault();
// Your custom code here
});
Preventing this event will only cancel the final action. The popup will still be considered as converted. To prevent the whole conversion, use the before-tracked-click event instead.
Accessing the event target
The event.target represents the clicked element, which is the same as the native click event target:
wisepops('listen', 'after-tracked-click', function(event) {
const clickedElement = event.target;
// Use clickedElement as needed
});
Use cases
Dynamically add a custom parameter to a redirect URL
This example demonstrates how to add a dynamic parameter (current year) to the CTA's redirect URL:
wisepops('listen', 'after-tracked-click', function(event) {
// Add the current year as CTA URL parameter
const year = (new Date()).getFullYear();
const link = event.target.closest('a');
if (link) {
link.href += (link.href.indexOf('?') === -1 ? '?' : '&') + 'year=' + encodeURIComponent(year);
}
});
Forward current URL parameters
This example shows how to copy specific parameters from the current URL to the CTA's destination URL:
wisepops('listen', 'after-tracked-click', function (event) {
// List of parameters to forward
var parametersToForward = ['utm_source', 'utm_content'];
// Parse URL
var vars = document.location.search.substr(1).split("&");
var queryString = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
try {
queryString[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
} catch (error) {
console.warn('Failed to parse parameter ' + pair[0]);
}
}
// Update the CTA link with current params to forward
var params = [];
parametersToForward.forEach(function (paramName) {
if (typeof queryString[paramName] !== 'undefined') {
params.push(encodeURIComponent(paramName) + '=' + encodeURIComponent(queryString[paramName]));
}
});
var link = event.target.closest('a');
if (params.length && link) {
link.href += (link.href.indexOf('?') === -1 ? '?' : '&') + params.join('&');
}
});
Best Practices
Always test your callbacks thoroughly to ensure they work as expected across different browsers and scenarios.
Consider performance implications when adding complex logic to your callbacks.
Use error handling to prevent potential issues from breaking your popup's functionality.
When possible, add your custom JS callbacks directly on your website instead of using the Wisepops interface. This allows for better version control and the ability to use backend variables.
Conclusion
The after-tracked-click event provides a powerful way to customize user experiences and track interactions with your Wisepops popups. By leveraging this event, you can create more dynamic and personalized popup behaviors, enhancing the overall effectiveness of your marketing campaigns.