Integrations

You can experimentally enable auto analytics tracking integration by enabling the respective option inside Smootify JS Options.

Danger

We are not responsible of a not compliant analytics tracks on your website. You have to enable analytics only previous explicit user consent.

Automatic Event Tracking

To enable analytics you can use JS APIs or you can follow up the previous guide.

The auto track feature automatically sends the following events:

Add to cart
Product page viewed

using automatically Mixpanel, GTag, fbq or Klaviyo utilities that are already installed on your site.

Note

Smootify doesn’t inject any of these before mentioned utilities, you have to enable them by following their respective documentations:

Mixpanel
gtag.js
fbq
Klaviyo - Klaviyo tracks events that happens only and exclusively after customers are logged in

Naturally be aware that making up analytics from a website nowadays is not reliable at all. Most browsers (Firefox by default, Chromium when set in “Do not track” mode) will block automatically all analytics scripts.

If you want to track more events with your own code, don’t forget to check out our global events.

Note

Automatic event tracking works only in combination with Shopify's cookie consent. Without it, enabling this feature will have no effect, and you will need to track events manually.

Google Analytics

If you want to correctly track AddToCarts with your gtag script, you have to listen to the Smootify Add To Cart event and send the event using the gtag utility of Google, as example you can use the snippet below:

document.addEventListener('smootify:added_to_cart', (event) => {
    const {lines, cart} = event.detail;
 
    if (window.gtag) {
      for (let line of lines) {
        const cartLine = cart.lines.nodes.find(e => e.merchandise.id === line.merchandiseId);
        if (cartLine) {
          gtag('event', 'add_to_cart', {
            'items': [{
              'id': line.merchandiseId.split("/").pop(),
              'quantity': line.quantity,
              'price': Number(cartLine.cost.totalAmount.amount),
              'currency': cartLine.cost.totalAmount.currencyCode
            }]
          });
        }
      }
    }
  });

This is the correct way to track the add to cart, since a click on the button will not ensure you that the product is purchasable or not.

Naturally, be sure you have the consent to track!

If you do not want to customize the code in any way, you can also just enable the Automatic Event Tracking.

Meta Analytics

If you want to correctly track AddToCarts within your meta pixel, you have to listen to the Smootify Add To Cart event and send the event using the fbq utility of Meta, as example you can use the snippet below:

document.addEventListener('smootify:added_to_cart', (event) => {
 
    const {lines, cart, goToCheckout} = event.detail;
 
    if (window.fbq) {
        for (let line of lines) {
            const cartLine = cart.lines.nodes.find(e => e.merchandise.id == line.merchandiseId);
            if (cartLine) {
                fbq('track', 'AddToCart', {
                    content_type: "product",
                    contents: [{
                        id: line.merchandiseId.split("/").pop(),
                        quantity: line.quantity,
                        value: Number(cartLine.cost.totalAmount.amount),
                        currency: cartLine.cost.totalAmount.currencyCode
                    }]
                })
            }
        }
    }
})