---
title: The Main Tracking Tag - Web
description: The Contentsquare Main Tracking Tag or Main tag is the core 'pixel' or 'code snippet' to implement on your domain to collect analytics data
lastUpdated: 07 April 2026
source_url:
html: https://docs.contentsquare.com/en/web/
md: https://docs.contentsquare.com/en/web/index.md
---
> Documentation index: https://docs.contentsquare.com/llms.txt
> Use this file to discover all available pages before exploring further.
The Contentsquare Main Tracking Tag or **Main tag** is the core 'pixel' or 'code snippet' that needs to be implemented on your domain to collect analytics data. It can be implemented **through a Tag Management System (TMS) or on the site's template**. Find step-by-step guides below.
before the implementation, you need to gather the following information:
* A **Contentsquare Tag ID** will be provided after kicking off the Contentsquare partnership. This 13-character unique ID can be used only on agreed domains — no data will be sent from elsewhere.
* You can provide **up to 20 custom variables** to enrich the analysis context with details about the pages or the user. They're usually collected from your datalayer or any other JavaScript object implemented throughout the site.
## Google Tag Manager (Template)
1. Open your container and go to the **templates** section. 
2. Select **Search gallery**. 
3. Type in **`contentsquare`** and select the **Contentsquare - Main tag** option. 
4. Click **Add to workspace**. 
5. Confirm your choice by selecting **Add** 
6. Go to the Tags section and click the **New** button to create a new tag. 
7. Configure it by selecting the top-right button. 
8. Search for **`contentsquare`** and select the **Contentsquare - Main tag** template that you've previously added to your container. 
9. Give a title to the tag and input your Tag ID in the dedicated field. To configure Custom Variables, enter:
* The index, from 1 to 20 - unique numbers only.
* The name.
* The value itself, which will be taken from one of your GTM Variables.
* The scope — select `Page & Visit (2 & 3)`, or `Single Page App (nextPageOnly 4)` if your website/part of it is a Single Page Application. Check with Contentsquare contact if unsure.
10. Select the trigger: `All Pages` or `DOM Ready` (when data layer has been fully loaded). We suggest **All Pages**, as long as your selected variables will be populated by then.
11. (Optional) Mask Personal Data within the GTM GUI.
Select the appropriate Personal Data masking method, depending on the type of personal information you're looking to mask:
* **Define CSS Selectors** for text nodes. 
* **CSS Selectors** and **Data Attributes** for element attributes. 
12. Save your changes and go back to your container. You should now see both the template and the newly created tag. 
## Google Tag Manager (Custom HTML)
1. Add a **new tag** on your workspace. 
2. Select **"Choose a tag type to begin setup..."**. 
3. In the list, pick the **"Custom HTML"** tag. 
4. Depending on your data layer availability, take a look at the following code examples and populate it with the information required:
* Implementing the tag and **pushing** data layer variables to Contentsquare:
```html
```
* Implementing the tag **without pushing** data layer variables to Contentsquare:
```html
```
5. Select **"Choose a trigger to make this tag fire..."**. 
6. In the list, pick the "All pages" trigger, **provided the Datalayer will have been loaded** before firing our tag. 
7. Name your tag (for instance *Contentsquare Main Tag*), then click **"Save"**. 
## Tealium
1. Add a **new tag** to your containers by choosing "Contentsquare UX Analytics" 
2. Add your **"TAG ID"** and click "next" twice, keeping the default configuration. If you do not have custom variables, click **"Finish"** and the installation is over. 
3. (Optional) Add custom variables:
* Choose a datalayer Variable in the UDO list and select **Select Destination**
* Select "Custom"
* Add a variable Name
* Click **Add**
* Click **Close** and the mapped variable will appear
4. Click **"Apply"** or **repeat STEP 3 for additional variables**.
## Adobe Launch
### Installing the Contentsquare extension
1. Search for Contentsquare within **Extensions** and select **Install**. 
2. Enter your **Tag ID** (should be provided by your Contentsquare Implementation team).
If you want to disable the Contentsquare tag from being injected but still want to use other features, expand the **Additional Configuration** section and select the **Disable tag injection** checkbox. 
If you want to have your WebView tag automatically injected when in WebView mode, expand the **Additional Configuration** section, select the **Configure WebView Tag** checkbox and insert your WebView Tag ID (provided by Contentsquare). 
3. To pass information to Contentsquare via custom variables, select **Add New Variable** and fill the following fields:
* The index, from 1 to 20 - unique numbers only.
* The name.
* The value itself, which will be taken from one of your GTM Variables.
* The scope — select `Page & Visit (2 & 3)`, or `Single Page App (nextPageOnly 4)` if your website/part of it is a Single Page Application. Check with your Contentsquare contact if you're unsure.
Use **Data Elements** in the value fields, as they are the Launch built-in method of passing information between extensions.
4. (Optional) Select **Add P**II** Masking**.
5. Upon activating Personal Data Masking, select the appropriate masking method, depending on the type of personal information you're looking to mask:
* Masking textual Personal Data using CSS selectors:  Make sure that your CSS selectors are valid. 
* If non-textual personal information needs to be masked, use the below text box and template:
6. Save your changes to your working library and move to the next step.
### Firing the Main Tag
Navigate to **Rules**, and open an existing rule or create a new one.
### Event Configuration
Depending on your needs, [select the event](https://docs.contentsquare.com/en/web/custom-page-events/#adobe-launch) to be used from the **Core** extension.
### Default implementation
Take a look at some of the viable examples below:
#### Page Bottom
#### DOM ready
### Action Configuration
Select the **Main Tracking Tag Installation action** from the Contentsquare extension
If you don't need to further amend the path or the queries sent, **you can leave the action as it** is and press 'Keep Changes'
Should you need to override the path or the query, you can do so by selecting the element and writing the string to be used as a substitute. You can also create Data Elements and use them in these fields
Once you're done, your new rule should look similar to the following
You can now press save and move on to the next rule.
## Commanders Act
1. Add a **new tag** to your containers by choosing "Contentsquare - Tag Main (builder)". 
2. Add your previously provided Tag ID. 
3. Add the desired Custom Variables:
* At "Add customs variables" select "yes"
* Fill all request variables by adding a name and pick the matching variable from the datalayer. 
The Contentsquare Main Tag is ready to be deployed.
## Shopify
The Contentsquare Shopify app is the recommended installation method for all Shopify stores. It ensures comprehensive coverage of your storefront (Home, Product, Collections, etc.) and offers exclusive features for Shopify Plus merchants.
Follow [installation instructions](#shopify-installation) which include how to migrate from a [legacy setup](#shopify-legacy-manual-installation-deprecated).
### Available features
The Contentsquare Shopify app enables the following features based on your Shopify plan:
| | **Shopify non-Plus plans** | **Shopify Plus plan** |
| - | - | - |
| **On Storefront** | ✅ All Contentsquare capabilities | ✅ All Contentsquare capabilities |
| **On Checkout** | • pageview tracking • e-commerce events | All non-Plus features + **Session Replay** + **Zoning & Heatmaps** |
See the [Shopify pricing page ↗](https://www.shopify.com/pricing) for information about their plans.
### E-commerce tracking
The app automatically tracks e-commerce events at every step of the checkout process. This data is essential for building accurate mappings and segmenting your audience.
This works seamlessly for both single-page and multi-step checkout configurations.
**Data collected:**
* `orderID` — Unique transaction identifier
* `amount` — Transaction total
* `currency` — Transaction currency code
These data points become immediately available for segmentation and filtering in your Contentsquare workspace, for Contentsquare Pro and Enterprise plans.
### Installation
#### Step 0: Remove legacy integration
Warning
If you previously installed Contentsquare using the [custom web pixel](#shopify-legacy-manual-installation-deprecated), remove it before proceeding. Running both implementations will cause duplicate data collection.
1. Go to **Settings** > **Customer events**.
2. Find the Contentsquare pixel and select **Disconnect**.
#### Step 1: Install the Contentsquare Shopify App
1. Install the [Contentsquare app ↗](https://apps.shopify.com/contentsquare) from the Shopify App Store.
2. In Contentsquare, go to the [Integration Catalog ↗](https://app.contentsquare.com/#/integrations/catalog), search for **Shopify**, and copy your connection code.
3. Return to Shopify and complete the **Contentsquare data collection** section:
* **Shopify connection code**: Paste the code from the Integration Catalog.
* **Data privacy contact**: Email address for privacy requests (required for compliance).
4. Click **Save**.
#### Step 2: Enable Contentsquare on storefront
Already using a TMS?
Skip this step if Contentsquare is already deployed via GTM or hard-coded. If GTM is also on checkout pages, exclude them from your GTM implementation to avoid duplicates.
1. Click **Add Contentsquare to storefront**.
2. In the Shopify theme editor, click **Save**.
#### Step 3: Enable Contentsquare on checkout
Warning
[Element Masking](https://docs.contentsquare.com/en/web/personal-data-handling/#remove-contentpersonal-data-from-the-collected-html) and [Element Unmasking](https://docs.contentsquare.com/en/web/personal-data-handling/#display-content-in-a-fully-masked-html-page) are not supported on Shopify checkout pages. Only Page Masking is supported.
1. Ensure **Page Masking (Automasking)** is applied to all checkout pages:
* Information
* Shipping
* Payment
* Thank you
* Order status
See how to manage page masking for [Free and Growth plans ↗](https://support.contentsquare.com/hc/en-us/articles/42799500061841-How-to-manage-tracking-data-collection-data-masking-and-IP-blocking) / [Pro and Enterprise plans ↗](https://support.contentsquare.com/hc/en-us/articles/40613380970385-How-to-set-up-and-manage-Page-Masking)
2. Click **Enable data collection on checkout** to capture pageviews on checkout pages. This also enables Session Replays, Heatmaps, and Zoning for Shopify Plus plans.
#### Advanced: Custom variables (Storefront)
To send custom variables to Contentsquare, define them before the main tracking tag loads.
Reference data from Liquid objects or tags:
```html
```
See [custom variables](https://docs.contentsquare.com/en/web/sending-custom-vars/#defining-custom-vars).
#### Advanced: Dynamic variables (Storefront)
Dynamic variables can be sent at any point during the pageview — they don't need to be defined before the Contentsquare tag loads.
Reference data from Liquid objects or tags:
```html
```
See [dynamic variables](https://docs.contentsquare.com/en/web/sending-dynamic-vars/#defining-dynamic-vars).
### Legacy manual installation (deprecated)
Deprecation notice
**This deployment method is deprecated.** Contentsquare has launched a [Shopify app](#shopify) that streamlines the implementation process for all Shopify customers.
**For Shopify Plus customers:** The Shopify app is required to capture user sessions during the checkout flow. Checkout session tracking is **only available** through the Contentsquare Shopify app on Shopify Plus plans. This legacy implementation method does not support checkout session capture.
Deprecated configuration (click to expand)
Note
To configure Contentsquare tags in your Shopify account, you need to be an admin on the account.
#### Base configuration
1. Within the main menu, select **Online Store > Themes**, then click the **Actions** drop-down menu, and **Edit Code**.
2. Under `Layout`, select the **theme.liquid** file.
3. Within the code editor, scroll down to the closing `` tag.
4. Copy the code below and replace `YOUR_TAG_ID` with your Contentsquare Tag ID:
```html
```
5. Paste the code above the closing `` tag.
6. Click `Save`.
#### Track the Checkout flow with Contentsquare Custom Web Pixel (Legacy)
Checkout liquid deprecations
Checkout Extensibility replaces `checkout.liquid`:
* For Checkout pages — deadline August 13, 2024,
* For Thank you and Order status pages — deadline August 28, 2025.
See how to deal with these changes below.
Tracking the Checkout flow is done via a custom pixel to add to your Shopify checkout. This custom pixel allows for sending a pageview and a dynamic variable to Contentsquare within each step of the checkout, for mapping and segmentation purposes, and track e-commerce transactions, all in one script.
This solution works for both single page and multi-step checkout scenarios.
Events collected are:
* `checkout_started`
* `checkout_contact_info_submitted`
* `checkout_address_info_submitted`
* `checkout_shipping_info_submitted`
* `payment_info_submitted`
* `checkout_completed`
* Ecommerce data:
* `orderID`
* `amount`
* `currency`
Once collected, these events are available for segmentation and filtering:
Limitations with Shopify Checkout Extensibility
* Custom variables are not part of the current pixel code tracking — you need to customize the script to send them in the checkout,
* No replay or Zoning metrics are available in the Checkout,
* The Contentsquare custom code in the checkout flow sends a pageview based on Shopify events. By default, it is **not subjected to user cookie consent**. Make sure to add your own cookie policy logic to the code provided below.
##### Adding the custom pixel to your checkout
1. Select `Settings` in the Shopify admin section.
2. Select `Customer events` then `Add custom pixel`.
3. Enter a name for the pixel such as `Contentsquare Checkout`.
4. Copy and paste the code below and replace `{{YOUR_TAG_ID}}` with your Contentsquare Tag ID:
```javascript
/*
*Name: Shopify CS Integration
*Version: 2.2.1
*/
const csTagID = "{{YOUR_TAG_ID}}";
const csTypeVendorPrefix = "CMS_SH_";
let submittedEvents = [];
function sendToCS(csKey, csValue, csPV, eventContext) {
csKey = csTypeVendorPrefix + csKey;
setTimeout(function () {
let setQuery;
127 collapsed lines
if (csPV && eventContext) {
const hash = eventContext.window.location.hash;
const query = eventContext.window.location.search;
setQuery = "?" + csPV;
if (hash) {
setQuery = hash.replace("#", "?__") + csPV;
} else {
if (query) {
setQuery = "?__" + csPV;
}
}
_uxa.push(["trackPageview", eventContext.window.location.pathname + setQuery]);
}
_uxa.push([
"trackDynamicVariable",
{
key: csKey,
value: csValue,
},
]);
}, 500);
}
function sendEcomCS(orderID, amount, currency) {
_uxa.push([
"ec:transaction:create",
{
id: orderID,
revenue: amount,
currency: currency,
},
]);
_uxa.push(["ec:transaction:send"]);
}
analytics.subscribe("page_viewed", (event) => {
if (
event.context.window.location.pathname.indexOf("/checkouts") > -1 &&
event.context.window.location.pathname.indexOf("/processing") === -1
) {
if (typeof CS_CONF === "undefined") {
window._uxa = window._uxa || [];
_uxa.push([
"setPath",
event.context.window.location.pathname +
event.context.window.location.hash.replace("#", "?__"),
]);
const mt = document.createElement("script");
mt.type = "text/javascript";
mt.async = true;
mt.src = "//t.contentsquare.net/uxa/" + csTagID + ".js";
document.getElementsByTagName("head")[0].appendChild(mt);
} else {
_uxa.push([
"trackPageview",
event.context.window.location.pathname +
event.context.window.location.hash.replace("#", "?__"),
]);
}
}
});
analytics.subscribe("checkout_started", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Checkout Started", "true", event.name, event.context);
}
});
analytics.subscribe("checkout_contact_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Checkout Contact Info Submitted", "true", event.name, event.context);
}
});
analytics.subscribe("checkout_address_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Checkout Address Info Submitted", "true", event.name, event.context);
}
});
analytics.subscribe("payment_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Payment Info Submitted", "true", event.name, event.context);
}
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Checkout Shipping Info Submitted", "true", event.name, event.context);
}
});
analytics.subscribe("checkout_completed", (event) => {
if (!submittedEvents.includes(event.name)) {
submittedEvents.push(event.name);
sendToCS("Checkout Completed", "true", event.name, event.context);
const data = event.data || "";
const checkout = data.checkout || "";
const order = checkout.order || "";
const orderID = order.id;
const totalPrice = checkout.totalPrice || "";
const amount = totalPrice.amount;
const currency = totalPrice.currencyCode;
if (
typeof orderID != "undefined" &&
typeof amount != "undefined" &&
typeof currency != "undefined"
) {
sendEcomCS(orderID, amount, currency);
}
}
});
```
5. Select **Save** then **Connect**.
Note
If you are injecting the CS tags in the checkout via any other means (Tag Management System, or the soon to be deprecated "additional scripts" section in the Shopify checkout setting), make sure you block the firing of the CS Main Tag and E-Commerce tag from these other means.
For instance, if you have a CS E-Commerce tag in GTM, pause this tag in GTM as this new pixel you have just implemented tracks the entire checkout and the e-commerce transactions.
6. Test that pageviews are sent in the checkout. Make a transaction to test the e-commerce transaction is also sent as expected.
#### Sending custom variables
To send custom variables to Contentsquare, define them before the Contentsquare main tag.
Modify the keys and values to your needs: you can get values from your Liquid Objects or Liquid Tags.
```html
```
For more information, see the [setCustomVariable command](sending-custom-vars/).
#### Sending dynamic variables
You can send dynamic variables at any point in the pageview, they do not need to be set before the Contentsquare tag is loaded.
Modify the keys and values to your needs: you can get values from your Liquid Objects or Liquid Tags.
```html
```
For more information, see the [trackDynamicVariable command](sending-dynamic-vars/).
## Salesforce websites
Starting with Tracking Tag version `15.201.10`, Contentsquare supports Salesforce websites.
* **Lightning Web Components (LWC)** are supported out of the box.
* **Salesforce Experience Cloud websites** built with Experience Builder are supported when the tag is implemented with the privileged script tag and the expected Salesforce security settings.
* This scope includes both **Aura** and **Lightning Web Runtime (LWR)** templates.
For Experience Builder websites, follow these guidelines:
1. In **`Experience Builder > Settings > Advanced > Head Markup`**, use the Salesforce [privileged script tag ↗](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/advanced_privileged_script.htm) instead of a standard `
```
This code creates a function which will add an asynchronous call to a script and then run the function. This is a way to avoid other elements loading being blocked on the page. This reduces the impact of the tag on the website's performance.
To collect custom variables from your datalayer, take a look at the following code example:
```html
```
Position the tag before the closing `` marker within each page of your website.
To have the most reliable traffic count without slowing down the display of the page, load the script as soon as the page is displayed ([`DOMContentLoaded` event ↗](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)).
Waiting for the whole page to load [`load` event ↗](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) may impact the integrity of paths passed on and the amount of visits.
Do not forget to include all subdomains and the potential pages called by iFrames.
## What it contains
The tag contains:
* A `CS_CONF` object gathering configuration elements of your own account, such as used domain, inclusion percentages, etc.
* The latest Tag version.
## Checking the loading of the main tag
Use the [Contentsquare Tracking Setup Assistant Chrome Extension ↗](https://chrome.google.com/webstore/detail/contentsquare-tracking-se/pfldcnnaiaiaogmpfdjjpdkpnigplfca) to confirm the main is loaded and that a first pageview is sent.
Tag configuration and pageviews
To check that the Tag configuration is appropriate, run the following script in Google Chrome's developer tools (`F12` or `⌘`+`⇧`+`C`), within the `top` JavaScript context.
```javascript
if (typeof CS_CONF != "undefined") {
if (CS_CONF["status"] == 1) {
console.log(
"%c UXA: OK on " +
CS_CONF.hostnames.join(",") +
(CS_CONF.allowSubdomains ? " and subdomains" : " but not on subdomains"),
"color:green",
);
} else {
console.log("%c UXA: No, " + CS_CONF["status"], "color:red");
}
} else {
console.log("%c Not loaded", "color:red");
}
if (document.cookie.indexOf("_cs_ex") >= 0) {
console.log("%c Browser excluded by cookie.", "color:red");
}
```
A success message displayed in green should be returned. If a red message displays, check [Who is included in the analysis?](who-is-included-in-the-analysis/).
## Advanced settings
### The `_uxa` object
The tag is based on a `window._uxa` object which receives instructions from the `push()` function. It is thus possible to send instructions even before the library has finished loading by initializing the `window._uxa` variable via an array. We use the fact that arrays interpret the `push()` function natively.
This is why all instructions sent to the tag work the following way:
```javascript
window._uxa = window._uxa || [];
window._uxa.push(