Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility

Aug 13, 2024

Steps to Control GTM Tags Based on Toolbar Visibility

1. Create a Variable in GTM

First, create a custom JavaScript variable to check if the edit toolbar is present.

  1. Go to your GTM workspace.
  2. Navigate to Variables and click on New.
  3. Name your variable (e.g., ToolbarVisibility).
  4. Select Variable Type as Custom JavaScript.
  5. Enter the following code:

    function() {
        return document.querySelector('#ccm-toolbar > ul > li.ccm-toolbar-page-edit.float-start.d-none.d-md-block') === null;
    }
    

    This code checks if the element with the edit toolbar selector is not present on the page.

  6. Save the variable.

2. Create a Trigger in GTM

Now, create a trigger that fires when the toolbar is not present.

  1. Go to Triggers and click on New.
  2. Name your trigger (e.g., No Toolbar Present Trigger).
  3. Choose Trigger Type as Page View (or another trigger type that suits your needs).
  4. Under This trigger fires on, select Some Page Views.
  5. Set the condition to:

    • Variable: ToolbarVisibility (the variable you just created)
    • Condition: equals
    • Value: true

    This means the trigger will fire when the toolbar is not present.

  6. Save the trigger.

3. Attach the Trigger to Your Tags

Finally, attach this trigger to the tags that should fire when the edit toolbar is not visible.

  1. Go to the tag(s) you want to control with this trigger.
  2. In the Triggers section, remove any current triggers that would cause the tag to fire under all conditions.
  3. Add the No Toolbar Present Trigger you just created.

4. Test and Publish

Use GTM Preview mode to test this setup. Ensure that your tags only fire when the Concrete CMS edit toolbar is not visible. Once everything works as expected, publish your changes.


This setup will ensure that your GTM tags fire only when the edit toolbar isn't present, helping you control when your GTM tags execute based on the presence of the edit toolbar.

Recent Tutorials
Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Upgrading Concrete from 8.5 to 9.x
Jun 21, 2024
By myq.

How to avoid problems upgrading from 8.5 to 9.x

How to change the default date format
May 30, 2024
By myq.

Change the format of the default date

WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Improvements?

Let us know by posting here.