For dev - How to troubleshoot Analytics in Boost Recommendation

On this page

• Identify the issue
• Root cause
• How to troubleshoot

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

1. Identify your Boost app version

You can follow the instruction from this article to learn how to.

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:

3. Update your code file with the correct ID/class name.

• For V2

• 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 '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 to boost-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 to boost-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)

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 support@boostcommerce.net.