To track CSS class changes with Google Tag Manager, you can follow the steps below:
- Set up Google Tag Manager: If you haven't already, sign up for a Google Tag Manager account and set up the container code on your website.
- Create a trigger: In the Google Tag Manager dashboard, navigate to "Triggers" from the side menu. Click on "New" to create a new trigger.
- Configure trigger settings: Give your trigger a name that accurately describes its purpose. Under the "Trigger Configuration" section, select the appropriate trigger type based on the CSS class change you want to track. For example, if you want to track when a specific class is added, select the "DOM Ready" trigger type.
- Customize the trigger: Click on "Some DOM Ready events," and in the "Fire this trigger when an Event occurs and all of these Conditions are true" section, specify the CSS selector for the element you want to track. For instance, if you want to track a div element with the class "my-class," use the following CSS selector: "div.my-class".
- Save the trigger: After configuring the trigger settings, click on the "Save" button to save your trigger.
- Create a tag: Navigate to "Tags" in the Google Tag Manager dashboard and click on "New" to create a new tag.
- Configure tag settings: Give your tag a name that reflects its purpose. Under the "Tag Configuration" section, select the appropriate tag type based on your desired tracking method. For example, if you want to send an event to Google Analytics when the CSS class changes, select the "Universal Analytics" tag type.
- Customize the tag settings: Configure the tag settings according to your tracking requirements. For a Google Analytics event, specify the event category, action, and label. Additionally, you can set up triggers to fire the tag only when specific conditions are met.
- Save the tag: After configuring the tag settings, click on the "Save" button to save your tag.
- Publish your changes: Once you have created the trigger and tag, click on the "Submit" button in the top right corner of the Google Tag Manager dashboard to publish your changes.
After following these steps, Google Tag Manager will track the CSS class changes specified in the trigger, and the corresponding tag will fire whenever the class change occurs.