Technical DocContentsquare Web Tracking Implementation

Contentsquare Web Tracking Implementation

The following instructions will go through the essential steps you'll need to take in order to tailor the Contentsquare implementation around your needs and start using our solution as soon as possible.

→ For further reference, please also consult our full technical documentation

The Main Tracking Tag

The Contentsquare Main Tracking Tag (Main tag) is the core 'pixel' or 'code snippet' that needs to be implemented on your domain in order to collect analytics data. It can be implemented through a TMS or on the site's template (step-by-step guides are below !).

Prior to the implementation, you need to gather the following information.

  • A Contentsquare Tag ID will be provided after kicking off the Contentsquare partnership. This 13-characters unique ID can be use 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.

 

Please select your setup environment from the tabs below.

[tab] Google Tag Manager (Template)

Step 1

Open your container and go to the templates section

Step 2

Click on Search gallery

Step 3

Type in contentsquare and select the Contentsquare - Main tag option

Step 4

Click Add to workspace

Step 5

Confirm your choice by pressing Add

Step 6

Go to the Tags section and click the New button to create a new tag

Step 7

Configure it by pressing the top-right button

Step 8

Search for contentsquare and select the Contentsquare - Main tag template that you've previously added to your container.

Step 9

Give a title to the tag and input your Tag ID in the dedicated field. If you'd like to configure any Custom Variables, please do so by selecting:

  • The numeric slot, from 1 to 20 - unique numbers only;
  • The name;
  • The value itself, which will be taken from one of your GTM Variables;

Select the trigger that best suits your needs. We suggest All Pages, as long as your selected variables will be populated by then.

Step 10

(Optional) Mask PII within the GTM GUI.

Select the appropriate PII 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.

Step 11

Save your changes and go back to your container. You should now see both the template and the newly created tag.

[tab] Google Tag Manager (Custom HTML)

Step 1

Add a new tag on your workspace.

Step 2

Click on "Choose a tag type to begin setup...".

Step 3

In the list, pick the "Custom HTML" tag.

Step 4

Depending on your dataLayer availability, take a look at the following code examples and populate it with the information required

  • Implementing the tag and pushing dataLayer variables to Contentsquare

    <script>
    (function () {
      window._uxa = window._uxa || [];
      try {
          window._uxa.push(['setCustomVariable', 1, 'Sample Variable', {{your-GTM-variable-here}}, 3]);
      } catch(e){}
      if (typeof CS_CONF === 'undefined') {
          window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
          var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
          mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
          document.getElementsByTagName('head')[0].appendChild(mt);
      }
      else {
          window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
      }
    })();
    </script>
    
  • Implementing the tag without pushing dataLayer variables to Contentsquare

    <script>
    (function () {
      window._uxa = window._uxa || [];
      if (typeof CS_CONF === 'undefined') {
          window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
          var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
          mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
          document.getElementsByTagName('head')[0].appendChild(mt);
      }
      else {
          window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
      }
    })();
    </script>
    

Step 5

Click on "Choose a trigger to make this tag fire...".

Step 6

In the list, pick the "All pages" trigger, provided the Datalayer will be loaded beforehand before firing our tag.

Step 7

Click on the "Save" button on the top right and name your tag (something along the lines of "Contentsquare Main Tag" should help you identify it later on).

[tab] Tealium

STEP 1

Add a new tag to your containers by choosing "Content Square UX Analytics "

STEP 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.

STEP 3 - CUSTOM VARIABLES (OPTIONAL)
  • Choose a datalayer Variable in the UDO list and click on Select Destination
  • Click on "Custom"
  • Add a variable Name
  • Click "add"
  • Click "close" and the mapped variable will appear

STEP 4

Click "Finish" or repeat STEP 3 for additional variables.

[tab] 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).

    Should you want to pass Contentsquare any information via custom variables, you can do so by clicking on 'Add a custom variable' and filling in the related input fields. We recommend to use dataElements in the value fields, as they are the Launch built-in method of passing information between extensions. You can also remove custom variables by pressing the 'minus' icon.

  3. (Optional) Select Add PII Masking.

  4. Upon activating PII Masking, select the appropriate masking method, depending on the type of personal information you’re looking to mask:

    • Masking textual PII 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:

You can now save your changes to your working library and move to the next step.

Firing the Main Tag

Head over to the 'Rules' tab, selecting 'Create New Rule'.

Event Configuration

Depending on your needs, select the event to be used from the core extension.

Default implementation - page bottom and DOM ready

Please take a look at some of the viable examples below:

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 and/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 dataElements 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.

[tab] Tag Commander

Step 1

Add a new tag to your containers by choosing "Contentsquare - Tag Main (builder)".

Step 2

Add your previously provided Tag ID.

Step 3

Add the desired Custom Variables:

  • At "Add customs variables" click on "yes"
  • Fill all request variables by add a name and pick the matching variable from the datalayer.

Step 4

The Contentsquare Main Tag is ready to be deployed.

[tab] Custom HTML

You just need to add the following lines of code on every page you want to analyze, at the end of the body marker.

<script>
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

In order to collect custom variables from your datalayer, please take a look at the following code example:

<script>
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

In terms of the event/position to bind our Main tag to, please do bear in mind the earlier, the better. However, make sure all the variables that need to be accessed have been populated!.

Further information about where and when to load it or the main tag.

Artificial Pageviews

Contentsquare's artificial pageviews are to be used when:

  • An action completely changes the content displayed on the page without refreshing it and changing its URL (i.e Ajax requests);
  • The site is built with a Single Page Application (SPA) and any related frameworks (i.e. React, Angular);
  • The user gets redirected to another step of a funnel without refreshing the page;
  • The site re-routes all the URL changes without refreshing the page;
  • The site is built as a Progressive Web App (PWA);
  • Important Modal/Popup windows are displayed.

When any of these situations occur, we can keep track of them with an artificial pageview.

→ Full technical documentation about firing artificial pageviews...

Single Page Applications and History Change

In the event of the URL structure being changed on each view change, we can keep track of this by simply firing the Main Tag again. The tag will automatically detect that it was previously put in place on the site and fire a new pageview instead.

[tab] Google Tag Manager (Template)

Step 1

Amend the Main tag configuration by adding a new trigger to it

Step 2

Create a new trigger

Step 3

Click on "Choose a trigger type to begin setup...".

Step 4

In the list, select the "History Change" trigger.

Step 5

Save your trigger.

Step 6

Click on the "Save" button on the top right.

[tab] Google Tag Manager (Custom HTML)

Step 1

Amend the Main tag configuration by adding a new trigger to it

Step 2

Create a new trigger

Step 3

Click on "Choose a trigger type to begin setup...".

Step 4

In the list, select the "History Change" trigger.

Step 5

Save your trigger.

Step 6

Click on the "Save" button on the top right.

[tab] Tealium

Create (or select an already existing) event that occurs on each history change or view re-routing. Assign this event to the Contentsquare extension.

[tab] Adobe Launch

In the event of a SPA implementation, if the path/query automatically changes on each re-routing, utilise the built-in history change event to fire the CS tag on each of these occurrences.

[tab] Custom HTML

With custom variables
<script>
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>
Without custom variables
<script>
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR TAG ID HERE}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

For tracking modal windows or events that don't change the URL structure, you'll need to use the Contentsquare Trackpageview functionality by following these methods and binding them to the correct action (button click/event trigger):

[tab] Google Tag Manager (Template)

Step 1

Open your container and go to the templates section

Step 2

Click on Search gallery

Step 3

Type in contentsquare and select the Contentsquare - Artificial Pageview option

Step 4

Click Add to workspace

Step 5

Confirm your choice by pressing Add

Step 6

Go to the Tags section and click the New button to create a new tag

Step 7

Configure it by pressing the top-right button

Step 8

Type in contentsquare and select the Contentsquare - Artificial Pageview option

Step 9

Select the tag and configure:

  • Select the Free text option and enter the value under Artificial Pageview value.
  • If there's a pop-up on your website and you need to deploy APV, then select This is for the opening a popup. in the drop-down.

    The value will be prefixed with cs-popin-. For instance cs-popin-cart, cs-popin-wishlist.

[tab] Google Tag Manager (Custom HTML)

STEP 1

Click on "Choose a tag type to begin setup...".

STEP 2

In the list, pick the "Custom HTML" tag.

STEP 3

Write the snippet to be fired in the HTML field. It should be similar to this:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

STEP 4

Click on "Choose a trigger to make this tag fire...".

STEP 5

Create a new trigger to make this tag fire

STEP 6

Click on "Choose a trigger type to begin setup...".

STEP 7

In the list, pick the "All Elements" trigger.

STEP 8

Check "Some Clicks"

STEP 9

Select "Click Element", "matches CSS selector" and enter a valid CSS filter corresponding to the element you want to track.

For example the valid CSS for:

<button class="btn btn primary"> Submit </button> 

will be:

.btn.btn.primary

[tab] Tealium

Assign the event you might already have in place to the a custom HTML snippet and write the snippet to be fired in the HTML field. It should be similar to this:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

[tab] Adobe Launch

Artificial Pageviews

When setting up the rule, make sure to target the specific event or condition needed. For instance, for an add to bag action, you could either follow the click route:

Or the custom event route:

Once you've chosen the desired event, you can select the Artificial Pageview tracking action from the Contentsquare extension.

Depending on the pageview you'd need to track, you can either specify the query to be passed to the Contentsquare servers or leave the input field empty, which will allow our script to capture the current URL automatically.

You can also use dataElements

[tab] Tag Commander

STEP 1

To add a new event, go to the "EDIT" step, and click "ADD EVENT" (1):

A configuration window will appear, with several fields:

(1) "Name": Name of the event you wish to add (2) "Id": The event’s ID (to be completed only if you know it and want to trigger the event based on its ID; otherwise, leave the field empty, and it will be generated automatically by TagCommander) (3) JavaScript code: Area where the event’s JavaScript code is entered (4) "Use Tag Cleaner": Feature allowing you to "correct" the event (rewrites it in order to avoid JavaScript errors and makes it compatible with the container’s code)

Click "ADD" to add your event to the container.

STEP 2

Go to the tag library. Once there:

(1) Write "Event Injection" in the search engine (2) Select the tag (3) Add the tag

In case of tracking pageviews with Contentsquare, the code to be deployed should follow this guideline:

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', *path_to_send* ]);

(4) Go to your website; place the cursor on the element you wish to place an event on and do a right click. In the menu that opens up, select "Inspect Element". (5) In the console, once the element is highlighted, right-click again. (6) Choose "copy" from the menu. (7) > "Copy Selector".

These actions on the site’s CSS are applicable to the Google Chrome browser only.

(8) If you know the element’s ID (starting with a #, copy and paste it in the #CSS_PATH# field).

(9) If you do not know or cannot find the ID, copy and paste the element’s information starting with "#" and replace " > "(space>space) with a single space in the code line.

(10) Copy and paste the line in the interface’s #CSS_Path# field.

Now enter the ID of the event you wish to summon in the corresponding field.

Proceed to the deployment step as you do with other tags.

[tab] Custom HTML

<script type="text/javascript">
   window._uxa = window._uxa || [];
   window._uxa.push(['trackPageview', *path_to_send* ]);
</script>

For instance, in case you wanted to keep track of the popup window appearing when adding an item to the cart:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')+'?cs-popin-add-to-bag']);
</script>

The E-commerce tag

The e-commerce tag is used to keep track of the e-commerce transactions happening on the site and empower analysis with revenue-related metrics.

It needs to be fired a single time on the confirmation page, after the transaction has been finalised, and needs the following mandatory parameters in order to function:

  • Transaction ID, which is the unique identifier for that transaction
  • Revenue, which is the total amount of the purchase

You can also include the following optional parameters:

  • Shipping, which is the amount paid for shipping
  • Taxes, which is the amount paid for taxes
  • Currency, which is the currency used for the purchase and also in our platform for a potential conversion.

Please do note that, at the moment, the shipping and taxes values are not automatically deducted from the total revenue. Should this be a requirement at your end, we suggest to remove those values from the revenue before pushing the transaction to Contentsquare.

→ Full technical documentation firing the e-commerce tag...

[tab] Google Tag Manager (Template)

Step 1

Open your container and go to the templates section

Step 2

Click on Search gallery

Step 3

Type in contentsquare and select the Contentsquare - E-commerce data option

Step 4

Click Add to workspace

Step 5

Confirm your choice by pressing Add

Step 6

Go to the Tags section and click the New button to create a new tag

Step 7

Configure it by pressing the top-right button

Step 8

Search for contentsquare and select the Contentsquare - E-commerce data template that you've previously added to your container.

Step 9-a

Give a title to the tag and add your GTM Variables to the Transaction IDs and Revenue fields.

Make sure to select a trigger that fires only on the confirmation page, or on all the pages that are needed to keep track of transactions, on which your variables are going to be populated.

Step 9-b

If you would like to send Contentsquare the shipping, taxes and currency values as well, fill in the optional parameters section.

Step 10

Save your changes and go back to your container. You should now see both the template and the newly created tag.

[tab] Google Tag Manager (Custom HTML)

Step 1

Create a new tag and paste the following code in the HTML field:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}',
        'revenue': '{{YOUR REVENUE HERE}}',
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}',
        'currency':'{{CURRENCY ISO CODE HERE}}'
    }]);
    window._uxa.push(['ec:transaction:send']);
</script>
Step 2

Inside the script, replace all the placeholder variables with your GTM values (using the double brace notation: {{transaction id}}, {{transaction revenue}}).

These variables must be available in the "Variables" section of Google Tag Manager.

Step 3

In the trigger list, select the "Confirmation page", or create one if it doesn't exist.

To do so:

  • Click on the "+" on the top right,
  • Click on "Choose a trigger type to begin setup..."
  • Pick "Window Loaded"
  • You don't want this to be trigger on every pages, so choose "Some Window Loaded Events"
  • Add a condition to match only the confirmation page — for instance, "Page URL" contains "checkout/confirmation"
  • Save and name your trigger "Confirmation page"

[tab] Tealium

The Tealium extension will automatically fire the Contentsquare transaction code as soon as the transaction values defined have been populated in your utag datalayer.

[tab] Adobe Launch

Head over to the rules tab and create a new one

Event Configuration

The E-commerce tag needs to be fired once on the confirmation page, after a transaction has been made and needs to be tracked. In order to do so, specify the path or the event to be used as a trigger. For example, if you want to target the confirmation page, you could use a similar condition:

If you have chosen the event+condition route, your setup should look similar to this:

Action Configuration

Select the Ecommerce Tag Installation action from the Contentsquare extension

You will then be prompted to fill in the required information by using either strings or dataElements.

Given the dynamic nature of transaction details, it is required to have previously setup dataElements with the requested information.

[tab] Tag Commander

Step 1

Add the e-commerce to your containers by choosing "Contentsquare - Tag Ecommerce (builder)".

Step 2

Add variables from commandersact datalayer for each entry of Contentsquare ecommerce tag. (required marked by *)

Step 3

The Ecommerce Contentsquare is ready to be deployed on confirmation page, where transaction information are set in the datalayer.

[tab] Custom HTML

First, assign a variable to the mandatory fields:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}',
        'revenue': '{{YOUR REVENUE HERE}}', 
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}',
        'currency':'{{CURRENCY ISO CODE HERE}}'
    }]);
</script>

Then execute the following function to send the above information to Contentsquare:

<script type="text/javascript">
    window._uxa.push(['ec:transaction:send']);
</script>

You can also put it all together in a single snippet:

<script type="text/javascript">
    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
        'id': '{{YOUR ID HERE}}', 
        'revenue': '{{YOUR REVENUE HERE}}', 
        'shipping': '{{YOUR SHIPPING AMOUNT HERE}}',
        'tax': '{{YOUR TAX AMOUNT HERE}}',
        'currency':'{{CURRENCY ISO CODE HERE}}'
    }]);
    window._uxa.push(['ec:transaction:send']);
</script>

Testing your implementation

Make sure that data is sent correctly to our server with the following steps.

Step 1

Download our Chrome Extension "Contentsquare Tracking Setup Assistant".

Step 2

Browse your website and, looking at the extension, make sure that:

  • a pageview is sent on every pages or major UI changes,
  • your are sending the desired custom vars,
  • if needed, a transaction is sent.

Otherwise, look at our Troubleshooting section.

Wrapping it up

Data is collected!

Once all the tags above have been implemented, the site will be fully passing data to Contentsquare and ready for analysis.

You will see the collected data on the solution 3 hours after it has been received.

Going further

To further enrich analysis, please refer to our technical documentation and your dedicated Implementation Manager and Customer Success Manager. This will allow for an expanded implementation setup, custom events tracking and Personal Data masking for Session Replay.

Connecting with Third Parties

You can easily connect the Contentsquare solution to 3rd party analytics tools and AB testing platforms.

  • ABTasty
  • Adobe Analytics
  • Adobe Test and Target
  • Google Analytics 360
  • Google Optimize
  • Dynamic Yield
  • Kameleoon
  • Maxymiser
  • Monetate
  • Optimizely
  • Qubit
  • Usabilla
  • VWO

→ Read the dedicated documentation...

Frequently Asked Questions

What is the file size of the tag?

The standard version of the Contentsquare tag is compressed to 69.3kb, and transferred from the Contentsquare CDN to the browser, compressed by gzip.

If however, there are additional custom integrations with other third-party services, then this file size can increase slightly.

How long is the tag cached for?

The Contentsquare tag is cached locally on a customers browser for 15 minutes, meaning that it should only be loaded once during the life of a typical browsing session. However, if it passes the 15 minute mark in a session, the only time the tag will be downloaded again is if a new version of the tag is deployed to the CDN.

How will it impact page performance?

The Contentsquare tag should be executed just after the Document Object Model (DOM) has finished its “load” event. Our recommended approach is to put the tag in the <head> element of your HTML page, with a defer attribute; this will make the browser download the tag asynchronously while it continues to parse the HTML, and once the DOM is ready, it will execute the tag.

This also means the Contentsquare tag should never impact any "paint" metrics, such as Time to First Byte (TTFB), First Contentful Paint (FCP) or Largest Contentful Paint (LCP).

The only metrics that the Contentsquare tag should have any impact on would be Total Blocking Time (TBT), Time to Interactive (TTI) and Interaction to Next Paint (INP). How much impact the tag has, depends entirely on how large the DOM is, and how often the DOM is "mutated" when the page is interacted with.

A page with a moderately sized DOM, where moving around the page doesn’t change the HTML (aka "mutate") too much, will mean the impact on Total Blocking Time should be very minimal.

Examples would be:

  • Desktop device with good processing power, good broadband connection, modern browser - the tag would have an impact of between 20ms and 50ms.
  • Mobile device with average processing power, 4G connection, modern browser - the tag would have an impact of between 60ms and 120ms.

If the Total Blocking Time impact from synthetic testing is showing higher than these examples, then it may be due to:

  • The Document Object Model (DOM) being large, over 2000 nodes
  • Mutation of the DOM being excessive, creating lots of network requests and thereby increasing load on the CPU
  • Device being tested on is very old and has minimal processing power
  • The synthetic test is on an old simulated mobile device (such as Moto G4), and is exaggerating the impact of JavaScript converting "short tasks" into "long tasks" that wouldn’t correlate to a real-world scenario.

What does this mean for Core Web Vitals?

The only Core Web Vital that would be affected by the Contentsquare tag is First Input Delay. This is a real user metric that relates to the synthetic metric Total Blocking Time.

You can easily track Core Web Vital scores via Google’s public BigQuery database, and viewed from a Google Data Studio dashboard.

Follow the instructions on this link to set it up for your website: https://g.co/chromeuxdash

Which performance metrics can the tag impact?

The Contentsquare tag will only impact metrics after it has loaded, parsed and executed. This means that it will not impact any paint metrics such as FCP, LCP or Speed Index. It will also not affect stability metrics such as Cumulative Layout Shift (CLS).

Here is a table that shows which metrics can be impacted.

Metric NameImpacted by CS Tag?
Time to First Byte (TTFB)No
First Meaningful Paint (FMP)No
Largest Contentful Paint (LCP)No
Speed IndexNo
Cumulative Layout Shift (CLS)No
Time to Interactive (TTI)Yes
Total Blocking Time (TBT)Yes
Interaction to Next Paint (INP)Yes

How many requests will the tag make?

The number of requests the Contentsquare tag will make depends on how many features are activated. If session replay is live, then there will be several requests made as the customer navigates around the website. These are batched up and sent as tiny HTTP POST or GET requests.

If the Document Object Model (DOM) is being changed in any way while the customer browses around the page - then this can trigger more requests as the tag will capture this to show what the customer is doing.

Additionally, if the tag is also enabled for capturing errors, then this will trigger a new request per error occurrence on the page.

How big are the requests that are posted by Contentsquare?

The requests posted to Contentsquare's API vary depending on the information sent. However, the majority are tiny, typically under 500 bytes.

Troubleshooting

My data is not being sent

Using our the Chrome Extension Contentsquare Tracking Setup Assistant, use the checklist below.

  • Is the main tag loaded? (Marker "1" above). If not:
    • Make sure the call is done by your TMS or in your template.
    • Make sure that no Cross-origin Resource Sharing (CORS) rules is preventing the call to be made.
  • Is the tag active? (Marker "2" above, the "Status" should be "active". — Otherwise, contact us)
  • Is the domain authorized? (The current domain should be listed here, on marker "2" above — Otherwise, contact us.)
  • Is the current session tracked? (Marker "3" — Otherwise, update this dropdown menu.)

My CS metric is different from other Analytics tool

The current web analysis technology is dependent on different browsers, operating systems and screen resolution. These different components can affect the quality of the data of all analytical tools.

When you compare Contentsquare data with other analytical tools, you can see differences between major metrics. There are several factors to consider depending on the tool and the indicators you are comparing.

Other analysis definitions. — The following measurement definitions have been extracted from the official Adobe Analytics and Google Analytics documentation. For additional troubleshooting assistance, refer to the corresponding tabs.

Sessions vs Visits metrics

Definitions
[tab] Contentsquare

The number of unique visits that happened within the selected analysis context.

A visit ends after 30 minutes of inactivity.

[tab] Google Analytics

Total number of Sessions (not unique) within the date range.

A session is the period time a user is actively engaged with your website, app, etc.

All usage data (Screen Views, Events, Ecommerce, etc.) is associated with a session.

[tab] Adobe Analytics

A sequence of page views in a sitting. The visits metric is commonly used in reports that display the number of user sessions within the selected time period.

The visit metric is always associated with a time period, so you know whether to count a new visit if the same visitor returns to your site. A session starts when the user first arrives on your site, and ends under one of the following scenarios:

  • 30 minutes of inactivity: Almost all sessions end in this manner. If more than 30 minutes has lapsed between image requests, a new visit begins.
  • 12 hours of consistent activity: If a user fires images requests without a 30+ minute gap for 12 hours, a new visit automatically starts.
  • 2500 hits: If a user generates a large number of hits without starting a new session, a new visit is counted after 2500 image requests.
  • 100 hits in 100 seconds: If a visit consists of more than 100 hits that occur in fewer than 100 seconds, the visit automatically ends. This behavior typically indicates bot activity, and this limitation is enforced to prevent these processing-intensive visits from increasing latency and increasing the time it takes to generate reports.

The definition of a visit can be shortened for a report suite if specifically requested, but it cannot be lengthened. Have one of your organization's supported users contact Customer Care to request this change.

A visit does not necessarily coincide with a browser session.

Troubleshooting suggestions

A major discrepancy in the visits/sessions can be due to multiple factors:

  • Different metric definition, as per the information shared above
  • The Tag firing method, which might come in place too late, hence allowing the users to bounce before tracking their visit.
  • The trigger chosen might not be the same used for your other analytics tool, hence creating a major difference.

 

Bounce and Bounce rate metrics

Definitions
[tab] Contentsquare

The ratio between the visitors who entered the site and left it without having seen a second page and all visitors, regardless of the amount of actions taken on that single page.

[tab] Google Analytics

A bounce is a single-page session on your site. Bounce rate is single-page sessions divided by all sessions, or the percentage of all sessions on your site in which users viewed only a single page and triggered only a single request to the Analytics server. These single-page sessions have a session duration of 0 seconds since there are no subsequent hits after the first one that would let Analytics calculate the length of the session.

[tab] Adobe Analytics

####### Bounces A visit that consists of a single server call.

For example, a single page visit is a bounce if a visitor does not interact with the page in a way that sends data to Adobe, such as clicking a link or a video start.

If more than a single hit is received in a visit, a Bounce is not counted

####### Bounce Rate Shows the percentage of visits that contain a single hit.

Bounce rate uses the Bounces metric and is calculated as:

Bounces divided by Entries

Bounce Rate does not include visits where multiple actions occurred on a single page.

Existing implementations can sometimes contain a calculated metric that differs from the Analytics default metric.

Check the calculated metric definition to make sure there are no differences.

Troubleshooting suggestion

When facing a major discrepancy with bounce and bounce rate, please note that the Contentsquare definition of bounce rate takes into account visitors who viewed only a single page, regardless of the amount of events/actions they took.

 

Pageviews metrics

Definitions
[tab] Contentsquare

Total number of pages viewed.

This takes into account all the artificial pageviews triggered by the trackpageview function.

[tab] Google Analytics

Pageviews is the total number of pages viewed.

Repeated views of a single page are counted.

[tab] Adobe Analytics

A Page View is counted for each server call that is sent.

This metric represents total instances of Page View.

TrackLink calls are not counted as page views and do not increment the Page Views metric.

Troubleshooting suggestions

A major discrepancy in the pageviews count can be due to multiple factors, such as:

  • The events that you're currently tracking with your other analytics tool might not be accounted for as Pageview.
  • If most of your site is running on a SPA framework, note that Contentsquare tracks each re-routing as a new pageview.

 

Transactions vs Conversions metrics

Definitions
[tab] Contentsquare

The number of sessions during which visitors completed an Ecommerce transaction.

An E-commerce transaction is defined by firing the Contentsquare E-commerce tag.

[tab] Google Analytics

Transactions is the total number of completed purchases on your site.

[tab] Adobe Analytics

####### Conversions Please do note that the conversion and conversion rate are defined as custom reports, hence the configuration comparison is key when checking for data inaccuracy.

  • Custom Conversion reports are based on eVars (conversion variables).
  • Conversion variables can persist beyond the page view and be associated with metrics within its specified expiration.
  • The reports' default metrics are revenue.

All standard eCommerce metrics can be used: Revenue, Orders, Units, Carts, Cart Views, Checkouts, Cart Additions, Cart Removals.

For further reference: https://experienceleague.adobe.com/docs/analytics/technotes/ga-to-aa/reports/conversions-reports.html?lang=en

####### Orders The number of orders made on your website during the selected time period.

Troubleshooting suggestions

When facing major discrepancies with the transactions count, if you have different confirmation pages, please make sure to fire our ecommerce tag on all of them.

 

Conversion rate

Definitions
[tab] Contentsquare

The number of sessions with Ecommerce transactions divided by the total number of sessions throughout the selected period.

[tab] Google Analytics

The percentage of sessions that resulted in an e-commerce transaction.

[tab] Adobe Analytics

See the conversions point above.

Troubleshooting suggestions

When comparing conversion rate between different tools, please do note that the Contentsquare conversion rate is based on the ratio between the number of visits with a transaction and the total number of visits.

This definition might differ depending on the other analytics tool you're using.

 

Revenue metrics

Definitions
[tab] Contentsquare

Total purchase amount of all sessions.

This doesn't include taxes and shipping, unless the total amount has been used in the E-commerce tag.

[tab] Google Analytics

The total revenue from web ecommerce or in-app transactions.

Depending on your implementation, this can include tax and shipping.

[tab] Adobe Analytics

Revenue is captured on the purchase event, and is defined as the total dollar amount for the sum of the order for each product.

This value comes from the purchase event.

Troubleshooting suggestions

A major discrepancy in the revenue can be due to multiple factors:

  • Contentsquare only takes into account the amount set as 'revenue' in the e-commerce tag when calculating the total revenue displayed
  • If you need to exclude shipping and taxes from the total revenue, you would need to do so before sending the transaction.
  • If you have a returns policy, please do note that Contentsquare does not currently support negative values in the transactions, so this won't be tracked.