Setting up Custom Event Tracking

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.

Where Should You Add the Script?

You should place each script inside the <body> tag of your webshop. Make sure it is added to all the pages of your website.

Add it at the bottom of the <body> tag to ensure that all elements load before tracking starts.

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.

Full Integration Code (Including <script> Tags)

Copy and paste the following code inside your <body> section in all the pages.

<script>

 // 🚀 Payment Status Update Event
 /**
 * 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);
 }

 // 🖱 Button Click Event
 /**
 * 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);
 }

 // 📄 Page View Event
 /**
 * 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);
 }

 // 📢 Custom Callable Event
 /**
 * 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);
 }

</script>

How to Implement the Events in Your Webshop

Now that you have added the script, let’s go through where and how to use each function.

1. Payment Status Update Event

This function triggers an event whenever the payment status changes in the webshop.

Trigger when the payment status changes (e.g., completed, failed, pending, etc.).

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 Usage (Inside Payment Processing Code):

updatePaymentAdUpEvent("complete"); // When payment is successful
updatePaymentAdUpEvent("failed"); // When payment fails

2. Button Click Event

🖱 Trigger when a user clicks a button on the webshop.

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 Usage (Inside a Button’s onclick Event):

<button onclick="buttonClickAdUpEvent('addToCartButtonElement')">Add to Cart</button>

📌 Example Usage (Inside JavaScript Code)

document.getElementById("checkoutBtn").addEventListener("click", function () {
 buttonClickAdUpEvent("goToCheckoutButtonElement");
});

3. Page View Event

📄 Trigger when a user visits a specific page.

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 Usage (On Page Load):

<script>
 document.addEventListener("DOMContentLoaded", function () {
   viewPageAdUpEvent("cartPage");
 });
</script>

4. Callable JS Event

Trigger when you need to track any custom 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 Usage (Track Contact Form Submission)

trackViaAdUp("contact_us_event", { "phone": "0123456789" });

📌 Example Usage (Inside JavaScript Code)

document.getElementById("subscribeBtn").addEventListener("click", function () {
 trackViaAdUp("newsletter_signup", { "email": "user@example.com" });
});

How to Test If Events Are Working?

Once the script is integrated, test if events are tracking correctly.

Method 1: Check Events in Browser Console

Open your webshop in Google Chrome.
Press F12 or Right-click → Inspect → Console.
Copy & Paste below in Console:

window.addEventListener("adup-button-click", (e) => console.log(e.detail));

Click a tracked button on your webshop. You should see event details logged in the console.

📌 Repeat the test for other event types by replacing "adup-button-click" with:

"adup-update-payment" for payment events
"adup-view-page" for page views
"adup-custom-event" for custom events

Method 2: Verify with AdUp Support

📩 If you don’t see the events in the console, or want to confirm tracking, contact our support team. We can verify whether the events are being received on our end.

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 :)

How to integrate AdUp's Tracking Script in custom CMS

Setting up Event Tracking - CMS