Success tracking with Google Tag Manager
Integrate our Success Tracking script via Google Tag Manager (GTM) to easily measure how well your experiences drive purchases on your site.
Step 1: Get your success tracking script
- Contact us via the Zoovu Support Portal to get your Success Tracking (ST) script.
- The script will come in two segments. The support team will tell you the order in which to combine them.
- Save both code segments in a .js file using a code editor like Visual Studio Code, or even Notepad if that's what you have.
Step 2: Format your script
- Combine the two code segments you received.
- Start with
<script>
before theZoovu.Tracking.trackPurchase({
code. - Close the combined code with
</script>
. - Remove any lines that start with
//
(these are comments). - Delete any unnecessary empty lines to keep the code clean.
- Save your file.
Example of what your code might look like:
<script type="text/javascript" src="https://orca-api.zoovu.com/advisor-fe-web/api/v1/integrations/client/zoovu-tracking"></script>
<script>
Zoovu.Tracking.trackPurchase({
transactionId: window.datalayer.ecommerce.purchase.actionField.id,
currency: 'EUR',
products: getPurchasedProductsArray(),
})
.then(function onResolve(status) {
if (status.wasEventSent) {
console.log('ZOOVU Success Tracking Event Was Sent');
} else {
console.log('ZOOVU Success Tracking Event Was NOT Sent');
console.log(status.whyEventWasNotSent);
}
})
.catch(function onReject(error) {});
function getPurchasedProductsArray() {
var ecommerceArray = window.datalayer.ecommerce.purchase.products;
var result = [];
for (var i = 0; i < ecommerceArray.length; i++) {
result.push({
sku: ecommerceArray[i].id,
name: ecommerceArray[i].name,
pricePerUnit: parseFloat(ecommerceArray[i].price),
quantity: parseInt(ecommerceArray[i].quantity, 10),
});
}
return result;
}
</script>
Step 3: Create a GTM tag
- Open Google Tag Manager (GTM) and go to your client’s workspace.
- Click on "Tags" in the menu, then "New" in the top right corner.
- In the new window, click on "Tag Configuration" and select "Custom HTML" under the "Custom" section.
- Name your tag something relevant, like "Zoovu Success Tracking."
- Paste the ST code from your .js file into the HTML field.
- Save your tag by clicking "Save" in the top right corner.
Step 4 (optional): Create variables to improve readability
- In GTM, click on "Variables" from the main menu.
- Select "New" in the User-Defined Variables section.
- Choose "Data Layer Variable" from the list.
- Name the first variable "zoovu transaction id" and set the
Data Layer Variable Name
toecommerce.purchase.actionField.id
. - Save the variable.
- Repeat to create a second variable named "zoovu products" with the
Data Layer Variable Name: ecommerce.purchase.products
. - Go back to "Tags" and select your Zoovu tracking tag.
- Update the code:
- Replace
transactionId: window.datalayer.ecommerce.purchase.actionField.id
withtransactionId: {{zoovu transaction id}}
. - Replace
var ecommerceArray = window.datalayer.ecommerce.purchase.products;
withvar ecommerceArray = {{zoovu products}};
.
- Replace
- Save the changes.
Step 5: Create a trigger
- Go to "Triggers" in the main menu and click "New."
- Choose the "Window Loaded" trigger type and select "Some Window Loaded Events."
- Label your trigger, e.g., "Zoovu Thank You Page Trigger."
- Set the condition to fire when the Page URL contains your Thank You page's specific path, like /checkout/success/.
- Save your trigger.
Step 6: Test your configuration
- In GTM, click "Submit" in the top right corner. This won’t push changes live but allows for testing in preview mode.
- Click "Preview" to activate preview mode.
- Enter your assistant’s website URL in the provided field and click "Connect."
- Navigate your website (which opens in a new window), right-click on the page, and select "Inspect."
- In the inspection tool, go to the "Network" tab and search for "CollectSalesEvent."
You should see three windows:
-
Your website in GTM’s preview mode.
-
The browser’s DevTools focused on network activities.
-
GTM Summary, showing whether your tag fired correctly.
-
Test the setup by making a purchase through your assistant. Use a 100% discount coupon or a non-payment method for easy cancellation.
Make sure that:
- The product is added to the cart via the assistant’s "Add to cart" button.
- The purchase completes and redirects to the Thank You page.
"CollectSalesEvent"
appears in DevTools.- The tag moves from "Tags not fired" to "Tags fired" in GTM.