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

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.