How to use the Contentsquare Tag Configurator (CSTC)

The Contentsquare Tag Configurator (CSTC) is a tool for managing your Tag-related features, providing you with customizable code Snippets, so you can tailor tracking to suit your needs.

You, or your team involved in the Contentsquare implementation, will typically use the CSTC during the initial implementation and thereafter to make updates as your business needs evolve. 

Jump to section

• Use cases
• Good to know
• How it works
  • Snippets, templates and triggers
  • Syntax usage: interpolation, iterable context, CSS selector inputs
• How to create, manage and deploy Snippets
• FAQs

Use cases

• Personal data masking: selectively mask and un-mask certain page elements in Session Replay to improve your replay experience, by ensuring you only mask what’s necessary.
• Artificial pageviews: send and track additional “pageviews” in cases where a user’s interaction with a page doesn’t register it as another unique pageview (e.g. pop-up, SPA etc).
• Custom errors: collect errors experienced by your visitors, such as form validation messages or unavailable product warnings (with up to 5 key/value pairs to categorize the errors).
• Custom variable (CVAR): collect additional information on the page, the user, or the session, sent within pageviews
• Dynamic variable (DVAR): collect additional session-level information that can be used for segmentation.
• Page event: collect additional session-level information that can be used for segmentation.
• Network requests - Mask URLs: register patterns to mask URLs collected for API errors and network details.

You'll find specific templates listed and linked below, available for each of the use cases.

Good to know

CSTC ownership

You should identify the appropriate team member/s to update and manage the CSTC, as technical knowledge is required. Note, the CSTC can only be accessed and managed by users with Console Admin permissions.

CSTC and other third-party Tag managers

It’s important to review and keep track of your configurations when using multiple tagging platforms to avoid conflicts.

SRI and self-hosted Contentsquare projects

After making changes on CSTC snippets and publishing, you will need to:

• SRI: generate a new snapshot manually

• Self-hosting: retrieve the new Tag

How it works

Snippets, templates and triggers

The CSTC uses Snippets which execute a Tag Command. You create and configure individual Snippets using two components: a template and a Trigger.

• Step 1 - Create a Snippet: Executes Tag Command
  • Step 2 - Select and configure template: The action that will be performed
  • Step 3 - Select and configure a trigger: The event that will execute the action

Syntax usage: CSS selector inputs, interpolation, and iterable context 

You can use the following guidance to help configure the input fields available for different templates and triggers.

CSS selector inputs

In some templates of CSTC, such as Element Masking, we make use of CSS selectors to target specific elements.

Snippets that rely on CSS selectors (including in their triggers) support a syntax similar to your browser when using the document.querySelectorAll method.

Using dynamic content with interpolation

In order to leverage both plain texts to send as values, as well as dynamic content retrieved from a dataLayer (for example), CSTC leverages a mechanism called interpolation.

Iterable context

It allows fetching values from arrays, such as Javascript variables. Iterable context is to be used when the position of the value you want to retrieve from an array is not known.

It can help you filter values from an array to extract the useful payload and then use them on your templates.

values(window.example)[?key] | [1:2]

EventName

Value: ${$.value}

values(window.example)

[
 { key: one, value: 5 }, 
 { value: 4}, 
 { key: two, value: 3}
]

[?key]

[
 { key: one, value: 5 }, 
 { key: two, value: 3}
]

[1:2]

[
 { key: two, value: 3}
]

values(window.dataLayer)[?google_tag_params]

values(window.dataLayer)[?google_tag_params] | [1:2]

${$.google_tag_params.make}

Jump to top

How to create, manage and deploy Snippets

First, you must navigate to Tag Configurator by clicking your profile icon (in the top right), followed by 'Tag Configurator'.

The workflow for creating and managing Snippets in the CSTC is as follows:

Step 1: Create (or edit) a Snippet

1. Select ‘+ New snippet’.

2. Give your snippet a name (something descriptive that tells you what it does).

3. Select your chosen template.

4. Select one of the available triggers (triggers differ per template).

5. Click ‘Save’.

Step 2: Deploy your Snippets

To deploy your Snippet/s you will need to publish the new version of the Tag, including all the changes to new or existing Snippets.

1. Check and update the ‘publication status’ of your Snippets as required.

• ‘On’: These will be deployed to the Tag upon publishing. Newly created Snippets are set to ‘On’ by default.
• ‘Off’: These will be disabled from the Tag upon publishing.

2. Click the ‘Publish [x] change(s)’ button. In order to approve and publish your changes, an email will be sent to your registered email address containing a four digit code.

3. On the new window that appears enter the code you received via email to approve the changes.

4. Click ‘Publish all snippets’ and the new Tag will be deployed, including all your Snippets and any changes made.

Step 3: Test your implementation

1. Download the Contentsquare Tracking Setup Assistant Chrome extension. 

2. Allow for 5 minutes to pass, clear your browser's cache and open (or reload) the page where your newly created snippet is supposed to fire.

3. Go on your website (or the specific page of your website) where the published snippet is supposed to fire and take the action that your published snippet is supposed to fire on.

4. Click to open the Contentsquare Tracking Setup Assistant extension and check under the last "New pageview sent" section whether your Custom/Dynamic Variable or Page Event was successfully collected.

Note that masking/unmasking snippets should be checked inside the Contentsquare platform itself.

Enable/Disable Snippets

You can enable and disable Snippets by using the toggles under the publication status:

‘On’: to enable a snippet.

‘Off’: to disable a snippet. Use this if you want to temporarily disable a Snippet without completely removing it from the project (that would require deleting a Snippet).

You will always need to publish any changes in order to deploy them to the Tag.

Delete a Snippet

Important: You should take extra caution before deleting any snippets, especially those related to masking, to validate the impact of doing so (such as exposing personal data in the case of masking).

To permanently delete a Snippet and remove it from the CSTC (including your Contentsquare project), click the three-dot menu next to a Snippet and click ‘Delete’. Note, this cannot be undone.

FAQs

Jump to top