Analytics and pixels

Smootify can load your tracking pixels itself: the Meta Pixel, Google Analytics 4, Google Ads and the TikTok Pixel. Each one loads only after the visitor gives the consent it needs. It then sends the standard e-commerce events, with the product ids of Shopify’s sales channels, so that catalog ads recognise the products. You set the ids once in the site’s custom code: there is no pixel code to paste.

1. Add your ids

In Site settings › Custom code › Head code, before the Smootify loader, set the ids of the services you use and leave out the others:

<script>
  window.SmootifyUserOptions = {
    ...(window.SmootifyUserOptions || {}),
    analytics: {
      metaPixelId: "123456789012345",
      ga4MeasurementId: "G-XXXXXXXXXX",
      googleAdsId: "AW-123456789",
      tiktokPixelId: "CXXXXXXXXXXXXXXXXXXX",
    },
  };
</script>
<script src="https://cdn.smootify.io/assets/v2/loader.js" data-channel="latest" data-css="true"></script>

If the site already sets other options, add analytics to the same script. See Options.

Each id has its own form, needs its own consent, and its events carry the product ids of the catalog that Shopify’s sales channel syncs for that service, so that catalog ads recognise the products:

A visitor who allows only analytics gets Google Analytics 4 and none of the advertising pixels.

2. Remove the other copies

Smootify must be the only one that loads these pixels. Any other copy sends its page view before the visitor has answered. When Smootify finds a copy on the page it uses it instead of loading a second one, but it cannot take back what that copy already sent.

Remove:

• the Google Analytics and Facebook Pixel ids in Webflow’s site settings, under Apps & integrations;
• the base code of Meta, Google or TikTok in the site’s or the pages’ custom code, and in Code Embeds;
• the same pixels in a tag manager.

What is sent

Each event has the service’s standard name, such as ViewContent for Meta or view_item for Google, and the product ids of step 1.

• Product view. Sent on the product pages, the pages under your products address (productsBase). A product shown anywhere else, such as in a quick view, sends none.
• Search. Sent by the search results page (smootify-search-page), not by the predictive search in the navbar.
• Amounts. The variant’s price times the quantity, before discounts.
• After the checkout starts, Shopify and its apps track the rest, such as the purchase, with the consent the visitor gave on your site. Set up purchase tracking on the Shopify side.

Consent and waitForConsent

• Where consent is required, such as in the EU and the UK, no script of Meta, Google or TikTok downloads until the visitor accepts. The page is also lighter for visitors who have not answered. When they accept, the page view and, on a product page, the product view go out.
• Where consent is not required, the scripts start at once.
• Google gets Consent Mode v2 from the visitor’s choices, with advertising signals only when the sale of data is allowed too. Meta gets Limited Data Use for US visitors who refused the sale of their data.

waitForConsent: false, inside analytics, downloads every script at once with the consent denied. It exists for one case: Google’s estimate of the conversions of visitors who refuse. It does not give you more data. Meta and TikTok receive nothing until the visitor accepts, and Google only receives anonymous pings without cookies. Keep the default, true, unless you use that estimate.

Shopify’s reports

Smootify also sends page views and additions to the cart to your store’s analytics in Shopify, once the visitor allows analytics. On the Free and Lite plans, visits and returning visitors need an analytics proxy on your Cloudflare account: see the analytics proxy. It reads that choice from the cookie banner. A site without smootify-consent and without pixel ids sends nothing to Shopify. A site that uses another consent tool passes the choice on as shown below.

The numbers are never complete. Ad blockers, browsers that block trackers, visitors who refuse consent and bots all leave gaps or noise, in Shopify’s reports and in every pixel. Compare trends over time rather than single counts.

Another consent tool

smootify-consent is the simplest way, but a site can keep another consent tool, such as Cookiebot or Finsweet’s cookie consent. Smootify still needs the visitor’s choice: pass it on from the tool’s callback, the code the tool runs when the visitor answers, with setConsent. Smootify then saves it in Shopify, loads the pixels it allows and feeds Shopify’s reports, as with its own banner. With Cookiebot, for example, in Site settings › Custom code › Head code:

<script>
  window.addEventListener("CookiebotOnConsentReady", () => {
    const c = window.Cookiebot.consent;
    window.Smootify = window.Smootify || [];
    window.Smootify.push((Smootify) =>
      Smootify.setConsent({ analytics: c.statistics, marketing: c.marketing, preferences: c.preferences }),
    );
  });
</script>

Every tool has its own callback and its own category names: check its documentation, and map its categories to analytics, marketing, preferences and saleOfData. Do not use both tools: the visitor would answer twice.

Other services

• Klaviyo and Mixpanel. When the site loads their own script, Smootify sends them product views and additions to the cart, after consent. The enableAutoTrack option, on by default, controls this: see Options.
• Klaviyo records events only for visitors it can identify. Smootify identifies the logged-in customer to it, so the events of an anonymous visitor who is not logged in do not show in Klaviyo.
• Anything else, such as Pinterest or Microsoft Clarity. Smootify does not load it. A developer can start it with the visitor’s consent: see the JavaScript API and the consent_changed event.

Before you publish

On your .webflow.io address, turn on Smootify’s debugger with Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac). Its panel points out an id that does not look like its service’s, a copy of a pixel that the page loads by itself, and ids set on a page without smootify-consent. See The debugger. Then accept the banner and check that the events arrive in each service’s own test view.

Coming from 1.x

• In 1.x the pixels were pasted in custom code or set in Webflow’s integrations, and tracked before any consent. Move their ids to analytics and remove the old code.
• The automatic events of 1.x (enableAutoTrack) no longer go to a service set in analytics, and they now wait for consent.