Welcome to the AdUp Custom Events integration guide! This document will help you seamlessly integrate our new custom JavaScript functions into your webshop, enabling our tracking script to capture key events in real-time.
Prerequisites
The AdUp AI Tracking script must already be integrated and running on your webshop.
Ensure you have access to your webshop’s source code for placing the custom JavaScript functions.
Custom AdUp Events Overview
We have introduced four custom events that you can trigger in your webshop for tracking:
Payment Status Update
Button Clicks
Page Views
Any Other Event (via Callable JS)
You need to call the respective JavaScript functions provided below at the appropriate events in your webshop.
1. Payment Status Update
1. Payment Status Update
This function triggers an event whenever the payment status changes in the webshop.
JavaScript Function
/**
* Function to trigger custom event for updating payment status.
* @param {string} paymentStatus - "complete" | "failed" | "expired" | "cancel" | "pending"
*/
function updatePaymentAdUpEvent(paymentStatus) {
const event = new CustomEvent("adup-update-payment", {
detail: { paymentStatus },
});
window.dispatchEvent(event);
}
How to Implement
Call updatePaymentAdUpEvent(paymentStatus) at the point where the payment status changes.
Ensure to pass only one of the following valid values for paymentStatus:
"complete"
"failed"
"expired"
"cancel"
"pending"
Example:
updatePaymentAdUpEvent("complete");
2. Button Click Event
2. Button Click Event
This function triggers an event whenever a specified button is clicked on your webshop.
JavaScript Function
/**
* Function to trigger custom event for button click.
* @param {string} buttonType - "payButtonElement" | "addToCartButtonElement" | "removeFromCartButtonElement" | "viewCartButtonElement" | "goToCheckoutButtonElement"| "productViewButtonElement" | "addToFavoritesButtonElement" | "removeFromFavoritesButtonElement" | "addToCompareButtonElement" | "customerReviewsButtonElement"
*/
function buttonClickAdUpEvent(buttonType) {
const event = new CustomEvent("adup-button-click", {
detail: { buttonType },
});
window.dispatchEvent(event);
}
How to Implement
Call buttonClickAdUpEvent(buttonType) when a button is clicked.
Ensure to pass only one of the following valid values for buttonType:
"payButtonElement"
"addToCartButtonElement"
"removeFromCartButtonElement"
"viewCartButtonElement"
"goToCheckoutButtonElement"
"productViewButtonElement"
"addToFavoritesButtonElement"
"removeFromFavoritesButtonElement"
"addToCompareButtonElement"
"customerReviewsButtonElement"
Example:
buttonClickAdUpEvent("addToCartButtonElement");
3. Page View Event
3. Page View Event
This function triggers an event when a specific page on the webshop is viewed.
JavaScript Function
/**
* Function to trigger custom event for viewing a page.
* @param {string} pageType - "singleProductPage" | "productCatalogPage" | "cartPage" | "checkoutPage" | "paymentPage" | "orderReceivedPage" | "profilePage" | "favoritesPage" | "comparePage" | "customerReviewsPage"
*/
function viewPageAdUpEvent(pageType) {
const event = new CustomEvent("adup-view-page", {
detail: { pageType },
});
window.dispatchEvent(event);
}
How to Implement
Call viewPageAdUpEvent(pageType) whenever the respective page is viewed.
Ensure to pass only one of the following valid values for pageType:
"singleProductPage"
"productCatalogPage"
"cartPage"
"checkoutPage"
"paymentPage"
"orderReceivedPage"
"profilePage"
"favoritesPage"
"comparePage"
"customerReviewsPage"
Example:
viewPageAdUpEvent("checkoutPage");
4. Callable JS Event
4. Callable JS Event
This function triggers an event in any sort of occasion it is called.
JavaScript Function
/**
* Function to trigger custom callable JS Events
* @param {string} eventName - The name of the event to trigger
* @param {any} eventPayload - The payload to send with the event
*/
function trackViaAdUp(eventName, eventPayload) {
const event = new CustomEvent("adup-custom-event", {
detail: { eventName, eventPayload },
});
window.dispatchEvent(event);
}
How to Implement
Call trackViaAdUp(eventName,eventPayload) whenever you need to track an event.
Ensure to pass the pre configured eventName
Optionally pass the corresponding eventPayload
Example:
trackViaAdUp("contact_us_event", { 'tell': '0123456789' });
Important Notes:
Please ensure that only the specified parameter values are used to avoid any tracking issues.
These functions should be placed within your webshop's code at appropriate event triggers to ensure that our tracking script can capture them accurately.
If you need any assistance with integration or have questions, feel free to reach out to our support team.
Thank you for choosing AdUp!
Have a nice day :)