⚠️ Shopify brands: do not follow this guide.

If your store runs on Shopify, do not install the FERMÀT Pixel using the instructions below. Shopify stores use a separate, native installation path that handles the pixel and event tracking for you. Following the manual steps in this article on a Shopify store can result in duplicate or missing events and an incorrect setup.

Contact your FERMÀT representative for the Shopify installation instructions.

What's in this guide:

Choose Your Installation Path
Path A: Direct Script
Path B: Google Tag Manager
Verify Your Installation
Event Tracking
FAQs

1. Choose Your Installation Path

The FERMÀT Pixel can be installed two ways. Pick one and follow the steps in the corresponding section.

Path A: Direct Script
Paste a snippet into your site's HTML <head>. Best for static sites or when you have direct access to your page templates.
→ Go to Section 2 (Path A: Direct Script)

Path B: Google Tag Manager
Add the pixel as a Custom HTML tag in GTM. Best when your site already uses GTM for tag management.
→ Go to Section 3 (Path B: Google Tag Manager)

Before you start: Have your Pixel ID ready. Your FERMÀT representative will provide this. It looks like a short alphanumeric string.

Use the snippet below for new installs. Older FERMÀT Pixel v2 snippets that load pixel.js are still supported and will continue to work. The current snippet loads the lightweight claire.mjs bundle and only loads the session recorder when recording is enabled in the pixel config.

2. Path A — Direct Script Installation

Step 1: Add the snippet to your <head>

Paste the following code into the <head> section of every page on your website. Replace YOUR_PIXEL_ID with your Pixel ID.

<script>
  window.fermat =
    window.fermat ||
    function () {
      (window.fermat.q = window.fermat.q || []).push(arguments[0]);
    };

  import("https://static.clairedefermat.com/pixel/v2/claire.mjs").catch(
    function () {}
  );

  // Initialize with your pixel ID.
  window.fermat({
    method: "init",
    config: {
      id: "YOUR_PIXEL_ID",
      recording: {
        enabled: true,
        samplingRate: 0.1, // Record 10% of sessions.
      },
    },
  });
</script>

Step 2: Verify the installation
Skip ahead to Section 4 to confirm the pixel is working.

Step 3: Set up event tracking
Continue to Section 5 to add product, cart, and purchase events.

That's it for direct installation. The pixel loads asynchronously and will never block your page.

3. Path B — Google Tag Manager Installation

Prerequisite: You should already have a GTM container installed on your website.

3.1 Create the Base Tag

1. Open GTM and create a new tag
Log in at tagmanager.google.com, select your container, click Tags → New.

2. Select Custom HTML
Click the Tag Configuration area and choose Custom HTML.

3. Paste the pixel code
Paste the code below. Replace YOUR_PIXEL_ID with your Pixel ID.

<script>
  window.fermat =
    window.fermat ||
    function () {
      (window.fermat.q = window.fermat.q || []).push(arguments[0]);
    };

  import("https://static.clairedefermat.com/pixel/v2/claire.mjs").catch(
    function () {}
  );

  // Initialize with your pixel ID.
  window.fermat({
    method: "init",
    config: {
      id: "YOUR_PIXEL_ID",
      recording: {
        enabled: true,
        samplingRate: 0.1, // Record 10% of sessions.
      },
    },
  });
</script>

4. Set the trigger to All Pages
Click the Triggering area and select All Pages.

5. Name and save
Name the tag Fermat Pixel v2 - Base and click Save.

3.2 Add Event Tracking Tags

Each FERMÀT event (add to cart, purchase, etc.) needs its own Custom HTML tag in GTM.

1. Create a trigger
Go to Triggers → New. Select Custom Event. Enter the dataLayer event name your site pushes (e.g., add_to_cart).

2. Create the tag
Go to Tags → New → Custom HTML. Paste the FERMÀT tracking code for the event (see Section 5 for each event's code).

3. Set tag sequencing
In the tag's Advanced Settings → Tag Sequencing, set Fermat Pixel v2 - Base to fire before this tag.

4. Assign the trigger and save
Attach the Custom Event trigger you created in step 1.

Tip: If your site already pushes GA4 ecommerce events to the dataLayer, you can create GTM Data Layer Variables to extract product data and use {{Variable Name}} syntax inside your Custom HTML tags.

3.3 Publish

1. Preview first
Click Preview in the GTM workspace. Navigate to your site and confirm tags fire correctly.

2. Publish
Click Submit, add a version name (e.g., "Added Fermat Pixel v2"), and click Publish.

4. Verify Your Installation

After installing the pixel via either method:

1. Open your site in a browser
Navigate to any page where the pixel is installed.

2. Open Developer Tools
Press F12 (or right-click → Inspect) and go to the Console tab.

3. Check the pixel status
Run the following command:

window.fermat({ method: "status" });

You should see a response containing initialized: true.

Success looks like this:

{ initialized: true, version: "2.0.0", recording: true, eventCount: 1, ... }

GTM users: You can also verify via GTM's Preview mode. Click Preview in GTM, navigate to your site, and confirm the FERMÀT tag appears under "Tags Fired."

5. Event Tracking

Implement the following six events to complete your FERMÀT Pixel integration. Each event uses the same structure:

window.fermat({  method: "track",  eventName: "event_name",  properties: { ... },});

5.1 Page View

Fire on every page load. If your site is a Single Page Application (SPA), see the FAQ for how to handle route changes.

window.fermat({ method: "track", eventName: "page_view" });

5.2 View Product

Fire when a user views a product detail page.

window.fermat({  method: "track",  eventName: "view_product",  properties: {    product: {      product_id: "PROD-123",      product_name: "Blue T-Shirt",      price: 29.99,      currency: "USD",      variant_id: "VAR-456",    // optional      sku: "SKU-789",           // optional      variant_name: "Large",    // optional    },  },});

5.3 Add to Cart

Fire when a user adds a product to their cart. [Quantity required]

window.fermat({  method: "track",  eventName: "add_to_cart",  properties: {    product: {      product_id: "PROD-123",      product_name: "Blue T-Shirt",      price: 29.99,      currency: "USD",      quantity: 2,    },  },});

5.4 Remove from Cart

Fire when a user removes a product from their cart. [Quantity required]

window.fermat({  method: "track",  eventName: "remove_from_cart",  properties: {    product: {      product_id: "PROD-123",      product_name: "Blue T-Shirt",      price: 29.99,      currency: "USD",      quantity: 1,    },  },});

5.5 Begin Checkout

Fire when the user starts the checkout process.

window.fermat({  method: "track",  eventName: "begin_checkout",  properties: {    total_price: 89.97,    total_tax: 7.20,           // optional    total_shipping: 5.00,      // optional    currency: "USD",    items: [      {        product_id: "PROD-123",        product_name: "Blue T-Shirt",        price: 29.99,        currency: "USD",        quantity: 2,      },    ],  },});

5.6 Purchase

Fire when the purchase is completed (e.g., on the order confirmation / thank-you page).

window.fermat({  method: "track",  eventName: "purchase",  properties: {    transaction_id: "ORDER-12345",    total_price: 102.17,    total_tax: 7.20,           // optional    total_shipping: 5.00,      // optional    total_discount: 0,         // optional    currency: "USD",    items: [      {        product_id: "PROD-123",        product_name: "Blue T-Shirt",        price: 29.99,        currency: "USD",        quantity: 2,      },    ],  },});

You're done! Once you've implemented all six events above and verified the pixel in Section 4, your FERMÀT Pixel integration is complete. Session recording is controlled by the recording settings in the initialization snippet. If you have questions, see the FAQ below or contact your FERMÀT representative.

6. FAQs

What parameters can I send with each event?

Every event uses the same structure. The properties object varies by event type:

Product fields (used by view_product, add_to_cart, remove_from_cart)

Field	Type	Required	Description
`product_id`	string	Yes	Unique product identifier
`product_name`	string	Yes	Product display name
`price`	number	Yes	Product price
`currency`	string	Yes	Currency code (e.g., USD)
`quantity`	number	Cart events	Required for add/remove cart
`variant_id`	string	No	Variant identifier
`sku`	string	No	Product SKU
`variant_name`	string	No	Variant display name

Checkout & purchase fields (begin_checkout, purchase)

Field	Type	Required	Description
`transaction_id`	string	Purchase only	Unique order/transaction ID
`total_price`	number	Yes	Order total
`currency`	string	Yes	Currency code
`items`	array	Yes	Array of product objects (with quantity)
`total_tax`	number	No	Tax amount
`total_shipping`	number	No	Shipping cost
`total_discount`	number	No	Discount amount

Page context (URL, referrer, screen size) is captured automatically with every event, you never need to provide it.

Does the pixel record user sessions?

Yes, when recording is enabled in the initialization config. The recommended snippet in this guide enables recording and sets samplingRate to 0.1, which records 10% of sessions. Use 1 to record all sessions, or set enabled to false to disable session recording.

recording: {
  enabled: true,
  samplingRate: 0.1,
}

The lightweight pixel bundle loads first. The session recorder is fetched only when recording is enabled.

The pixel automatically masks sensitive data in recordings:

All form inputs — text, email, phone, password, textarea, select, date pickers
Common PII patterns — email addresses, phone numbers, SSNs, credit card numbers, IP addresses, dates of birth, passport/license numbers

How do I mask sensitive content in recordings?

Customer names, street addresses, and custom account numbers displayed as plain text are not automatically detected. If your site displays these, add one of the following CSS classes:

Blur content (still occupies space, but is unreadable):

<div class="claire-mask">Sensitive content</div>

Block content entirely (not recorded at all):

<div class="claire-block">Hidden from recordings</div>

How do I track page views in a Single Page Application?

SPAs don't reload the page on navigation, so you need to fire page_view manually on each route change.

React Router

useEffect(() => {  window.fermat({    method: "track", eventName: "page_view"  });}, [location.pathname]);

Vue Router

router.afterEach(() => {  window.fermat({    method: "track", eventName: "page_view"  });});

Next.js (Pages Router)

import { useRouter } from "next/router";useEffect(() => {  const onChange = () => {    window.fermat({      method: "track",      eventName: "page_view"    });  };  router.events.on("routeChangeComplete", onChange);  return () =>    router.events.off("routeChangeComplete", onChange);}, [router.events]);

GTM
Create a History Change trigger and attach it to a Custom HTML tag that fires the page_view event.

How do I enable debug mode?

Pass a debug object during initialization:

window.fermat({
  method: "init",
  config: {
    id: "YOUR_PIXEL_ID",
    recording: {
      enabled: true,
      samplingRate: 0.1,
    },
    debug: {
      debugLogging: true, // console logs
      sendEvents: true,   // set false to suppress
    },
  },
});

You can also update debug settings at any time after init:

window.fermat({  method: "setDebugConfig",  debugConfig: { debugLogging: true },});

Option	Type	Default	Description
`debug.debugLogging`	boolean	`false`	Enable console logging
`debug.sendEvents`	boolean	`true`	Set `false` to disable sending (testing only)

What does the status response look like?

window.fermat({ method: "status" });

// Returns:// {//   initialized: true,//   version: "2.0.0",//   sourceType: "external",//   config: { ... },//   sessionId: "ses_abc123",//   visitorId: "vis_xyz789",//   recording: true,//   eventCount: 42,//   queueLength: 0// }

Will the pixel slow down or break my site?

No. The pixel loads asynchronously and includes built-in error boundaries. It will never block page rendering or cause errors on your site. The current snippet loads the lightweight pixel bundle first and fetches the session recorder only when recording is enabled.

For extra safety, you can wrap calls in a guard:

if (window.fermat) {  window.fermat({    method: "track",    eventName: "add_to_cart",    properties: { ... },  });}

How do I set up event tracking in GTM?

Each event needs its own Custom HTML tag in GTM. For each event in Section 5:

Create a Custom Event trigger matching the dataLayer event name (e.g., add_to_cart)
Create a Custom HTML tag with the FERMÀT tracking code
In Advanced Settings → Tag Sequencing, set Fermat Pixel v2 - Base to fire before this tag
Attach the trigger and save

If your site already pushes GA4 ecommerce events to the dataLayer, you can use GTM Data Layer Variables and {{Variable Name}} syntax inside your tags.

FERMÀT Pixel v2 Installation Guide — FERMÀT Commerce — For implementation support, contact your FERMÀT representative.

FERMÀT Pixel v2 Installation Guide - Shopify Brands

FERMÀT Pixel v2 Installation Guide - Direct Script & Google Tag Manager