📖 In this article, we delve into effectively troubleshooting issues related to the tracking of recommendation metrics like Revenue, Click-Through Rate (CTR), and Conversion Rate (CVR) in Boost AI Search & Discovery Recommendation.
Identify the issue
While the Recommendation widgets in your store are functioning correctly, a notable issue arises when reviewing the analytics. Specifically, the metrics for Revenue, CTR (Click-Through Rate), and CVR (Conversion Rate) are persistently low or almost zero.
This problem is often linked to the Add to Cart button's tracking setup. The button should have a specific class name to track analytics events accurately. In cases where this class name is missing or differs, the tracking of user interactions with the button might not be captured correctly, leading to skewed analytics.
Below is an example of a correct class name implementation where the u:"add_to_cart"
parameter is observed in the event request sent to our API during Add to Cart button interactions.
Root cause
The issue with analytics accuracy in Recommendation widgets often arises from using a live theme in your store that is not fully supported. This mismatch can lead to the use of an incorrect class on the Product page's Add to Cart button.
Conclusion
Each Shopify theme has its unique class for this button, and our app might not automatically adapt to all of them. Thus, if your store employs a custom or non-default Shopify theme, this discrepancy in class naming could lead to the observed analytics issue.
How to troubleshoot
To resolve the issue of inaccurate analytics metrics in Boost AI Search & Discovery Recommendation Analytics due to class discrepancies in 'Add to Cart' buttons, follow these steps:
Step 1: Identify your Boost app version
You can follow the instructions from this article to learn how to.
Step 2: Verify your Add to Cart/Buy Now button Class Name
Go to the Product page → Inspect the classes of the Add to cart/ Buy now button.
Select/Find its ID or a unique class.
For example:
Step 3: Update your code file with the correct ID/class name.
For V2
⚠ If you encounter the error below, it means that this issue comes from Boost V2 not tracking the event which is a different root cause. Please contact us for further assistance.
From Shopify admin, go to your theme's Code editor. Open this file:
boost-pfs-init.js
Add this code below to the file:
addEventListener("DOMContentLoaded", (event)=> {
Selector.trackingAddToCart = 'form[action="/cart/add"] *[type="submit"], form[action="/cart/add"] *[name="add"]';
// If you have a buy now button, please modify the selectors list below
Selector.trackingBuyNow = '.shopify-payment-button, #dynamic-checkout-cart'
});
Add the selected ID/class name from step 2 as selectors to the Selector.trackingAddToCart (for the 'Add to Cart' button) or Selector.trackingBuyNow (for 'Buy now' button) properties.
For example: Your theme’s Add to cart button has this unique id
add-to-cart-button
.This is how you should add your custom code toboost-pfs-init.js
:
addEventListener("DOMContentLoaded", (event)=> {
Selector.trackingAddToCart = 'form[action="/cart/add"] *[type="submit"], form[action="/cart/add"] *[name="add"], #add-to-cart-button';
// If you have a buy now button, please modify the selectors list below
Selector.trackingBuyNow = '.shopify-payment-button, #dynamic-checkout-cart'
});
The result ('Add to Cart' button only)
For V3
From Shopify admin, go to your theme's Code editor. Open this file:
boost-sd-custom.js
Add this code below to the beginning of the file:
boostSDAppConfig.analytics = {
selectorAddToCart: '.boost-sd__btn-add-to-cart, form[action="/cart/add"] *[type="submit"], form[action="/cart/add"] *[name="add"]',
// If you have a buy now button, please modify the selectors list below
selectorBuyNow: 'boost-sd__btn-buy-now, .shopify-payment-button__button, .shopify-payment-button, #dynamic-checkout-cart'
};
Add the selected ID/class name from step 2 as selectors to the SelectorAddToCart (for 'Add to Cart' button) or SelectorBuyNow (for 'Buy now' button) properties.
Example: Add to cart button selector
button.relative.w-full.uppercase.button-primary[aria-label="add to cart"]
. This is how you should add your custom code toboost-sd-custom.js
:
boostSDAppConfig.analytics = {
selectorAddToCart: '.boost-sd__btn-add-to-cart, form[action="/cart/add"] *[type="submit"], form[action="/cart/add"] *[name="add"], button.relative.w-full.uppercase.button-primary[aria-label="add to cart"]',
// If you have a buy now button, please modify the selectors list below
selectorBuyNow: 'boost-sd__btn-buy-now, .shopify-payment-button__button, .shopify-payment-button, #dynamic-checkout-cart'
};
The result ('Add to Cart' button only)
Step 4: Check Event Tracking
After changes, click the buttons and verify in the network tab if the correct event request is sent to the API.
If there is an event e request sent to our API and it has the param u: add_to_cart
or u: buy_now
, it means that the tracking is working properly. For example:
This process ensures your 'Add to Cart'/'Buy now' buttons are properly tracked, reflecting accurate analytics.
If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at [email protected].