Setting up custom JavaScript variables in Google Tag Manager (GTM) allows you to dynamically pull information from your website and pass it into tags for more advanced tracking, reporting, and personalization. These custom JavaScript variables can be based on existing page elements, JavaScript values, or even calculations that can be applied within your GTM container.

Here’s a step-by-step guide on how to create and use custom JavaScript variables in GTM.

Step 1: Access Google Tag Manager

1. Login to Google Tag Manager: Go to the Google Tag Manager dashboard and log in to your account.
2. Select Your Container: Choose the appropriate container (the website or app where you want to implement the custom JavaScript variable).

Step 2: Create a Custom JavaScript Variable

1. Navigate to Variables:
   • From the GTM sidebar, click on Variables.
   • You’ll see the User-Defined Variables section. This is where you can create new variables for use in tags and triggers.
2. Create a New Variable:
   • Click on the New button to create a new variable.
   • In the Variable Configuration window, choose Custom JavaScript as the variable type.
3. Write Your Custom JavaScript Code:
   • After selecting Custom JavaScript, you’ll be prompted to enter a JavaScript code snippet. This code can pull values from the page, perform calculations, or return data based on your needs.
   • The JavaScript function you write must return a value. For example, if you want to grab the text of a specific HTML element, the JavaScript function might look like this:
     javascript

     Copy code

     function() {
var element = document.querySelector('.element-class'); // Replace with the correct selector
return element ? element.textContent : 'default value'; // Returns text content if element exists
}


     In this example, the variable will return the text content of an element with the class element-class. If the element doesn’t exist, it will return a default value.

4. Save the Variable:
   • After entering the JavaScript code, click Save to create your custom JavaScript variable.

Step 3: Use the Custom JavaScript Variable in Tags

Once you’ve created your custom JavaScript variable, you can use it in tags to dynamically pass data to platforms like Google Analytics, Facebook Pixel, or Google Ads. Here’s how to use the custom JavaScript variable in a tag:

1. Create or Edit a Tag:
   • Go to the Tags section in GTM and either create a new tag or edit an existing one (e.g., a Google Analytics tag).
2. Insert the Variable:
   • In the tag configuration, you can insert the custom JavaScript variable where needed. For example, if you are sending an event to Google Analytics, you might include the variable as part of the event label:
     • In the Event Label field, you can select your custom JavaScript variable by clicking the variable icon (it looks like a Lego block) next to the input field.
     • From the list of variables, select the custom JavaScript variable you created.

     This will pass the dynamic value from the JavaScript code into the tag, allowing you to track it in Google Analytics or other tools.

3. Set the Trigger:
   • Set a trigger for the tag. For example, you might trigger it when a user clicks a specific button or submits a form, depending on what data you want to track.
   • Once your tag and trigger are set, click Save.

Step 4: Test the Variable in GTM’s Preview Mode

Before deploying the custom JavaScript variable live on your site, it’s important to test it in Preview Mode to ensure it’s working as expected.

1. Activate Preview Mode:
   • Click on the Preview button in GTM’s top-right corner.
   • Enter your website URL to enter Preview Mode.
   • The GTM preview panel will appear on your site, showing detailed information about tags, triggers, and variables.
2. Verify the Custom JavaScript Variable:
   • Interact with your website to trigger the event or action that should capture the data for your custom JavaScript variable.
   • Open the GTM preview panel and go to the Variables tab to check if the custom JavaScript variable returns the expected value.
   • If the value is correct, this indicates that your custom JavaScript variable is set up properly.

Step 5: Publish Your Changes

Once you’ve confirmed that the custom JavaScript variable is working correctly in Preview Mode, you can Publish your changes.

1. Submit Changes:
   • After testing, click on the Submit button in GTM to push the changes to your live site.
   • Add a version name and description (optional), then click Publish.

Use Cases for Custom JavaScript Variables

Custom JavaScript variables can be used in a variety of situations. Some common use cases include:

1. Extracting Page Information: You might want to capture information from the page, like a product ID, a user’s membership level, or the content of a dynamic element. Example: Tracking a product ID from the page URL.
   javascript

   Copy code

   function() {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get('product_id') || 'no-product-id';
}

2. Tracking Dynamic Data: You can track user interactions, such as capturing form field data, button clicks, or other dynamic elements. Example: Getting the value from an input field.
   javascript

   Copy code

   function() {
var inputField = document.querySelector('#input-field-id');
return inputField ? inputField.value : 'no-value';
}

3. Calculating Values: You can use custom JavaScript to perform calculations based on the data available on the page, such as calculating the total price in a shopping cart or the number of items in a cart.

   Example: Calculating the total price in the shopping cart.

   javascript

   Copy code

   function() {
var priceElements = document.querySelectorAll('.cart-item-price');
var total = 0;
priceElements.forEach(function(item) {
total += parseFloat(item.textContent.replace('$', '').trim());
});
return total;
}

4. User-Agent or Environment Detection: You can track information related to the user’s browser, device type, or environment.

   Example: Tracking the user’s device type (mobile or desktop).

   javascript

   Copy code

   function() {
return /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
}


Tips and Best Practices

• Error Handling: Always include error handling in your JavaScript code to ensure the variable returns a value even when the target element doesn’t exist or the value can’t be retrieved.

  Example:

  javascript

  Copy code

  function() {
try {
var element = document.querySelector('.element-class');
return element ? element.textContent : 'default value';
} catch (e) {
return 'error';
}
}

• Avoid Personal Data: Ensure that the custom JavaScript variable does not capture sensitive or personally identifiable information (PII) unless you have explicit user consent and comply with privacy laws like GDPR.
• Optimization: Keep your JavaScript code simple and efficient to avoid slowing down page performance.

Conclusion

Setting up custom JavaScript variables in Google Tag Manager is a powerful way to capture dynamic data from your website for advanced tracking and analytics. By writing custom JavaScript, you can extract any data you need, and then use it within GTM to enhance your tags and improve reporting accuracy. Always test your variables in GTM’s Preview Mode before publishing to ensure that everything works as expected.