How ChatGPT Helped Me Push a DataLayer Event for GTM ??

Ever found yourself stuck trying to track specific actions or information on your website, only to find it’s not available in the existing dataLayer or GTM variables? And, of course, the dev team is either swamped or unavailable. ??

Well, here’s a use case that might just save the day!

Here’s how ChatGPT made it easy:

1. Understanding the Requirement: I needed to capture clicks on elements with a specific class (wedocs-doc-link) and get the associated header text to push a dataLayer event. ??
2. Guided JavaScript Creation: I copied the relevant HTML element and sent it to ChatGPT. It walked me through writing the JavaScript code step-by-step. The script attaches event listeners to elements, grabs the header text, and pushes the event to the dataLayer. ??
3. Testing and Debugging: ChatGPT also gave me tips on how to test and debug the script right in the Chrome console, ensuring it worked perfectly before going live. ??

Here’s the simple script ChatGPT helped me create:

// Select all elements with the class 'wedocs-doc-link'
var docLinks = document.querySelectorAll('.wedocs-doc-link a');

// Loop through each element and add a click event listener
docLinks.forEach(function(link) {
    link.addEventListener('click', function(event) {
        // Prevent the default action (optional)
        event.preventDefault();
        
        // Find the parent li element
        var parentLi = link.closest('.wedocs-docs-single');
        
        // Retrieve the text of the h3 element within the same li
        var headerText = parentLi.querySelector('h3 a').innerText;
        
        // Push the event to the dataLayer
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'docLinkClick',
            'headerText': headerText
        });
        
        // Log the dataLayer for testing purposes
        console.log('Event pushed to dataLayer:', {
            'event': 'docLinkClick',
            'headerText': headerText
        });
        
        // Optionally, you can still follow the link after pushing the event
        // window.location.href = link.href;
    });
});
        

1. Implementing in GTM: With the dataLayer event in place, integrating it into Google Tag Manager was straightforward, allowing for effective tracking of user interactions. ??

To make it even clearer, Here's a quick video showing how I added the code to the console and demonstrating the dataLayer event in action. ??

If you're not a JavaScript expert but need to track specific actions or information on your website without waiting for your dev team, give ChatGPT a try. It’s like having a coding assistant right there with you! ??