Configuring a JavaScript variable in Google Tag Manager (GTM) allows you to dynamically capture values from your website using custom JavaScript. This is useful when you need to track values like specific data from the page, such as product prices, user interactions, or other dynamic information that is not natively available in GTM’s built-in variables.

Here’s a step-by-step guide on how to configure a JavaScript variable in Google Tag Manager:

Step 1: Log in to Google Tag Manager

1. Log in to your Google Tag Manager account.
2. Select the container where you want to configure the JavaScript variable.

Step 2: Navigate to Variables

1. In the left-hand side panel, click on Variables.
2. In the Variables section, click New to create a new variable.

Step 3: Choose the Variable Type

1. In the new variable setup, click on Variable Configuration.
2. From the list of variable types, select JavaScript Variable.

Step 4: Define the JavaScript Variable

Now you will need to configure the actual JavaScript that will pull the value from your website.

1. Enter the JavaScript variable path (also known as the JavaScript expression). This is the path to the JavaScript object you want to reference. You can pull values from the DOM, window, or other JavaScript objects.

   Examples of common JavaScript variable paths:

   • Global JavaScript variable: If the JavaScript variable is a global variable, you would enter the name of that variable. For example, if the global variable is window.pageCategory, you would enter pageCategory.
   • DOM Element: If you want to retrieve a value from the DOM, such as the content of a specific HTML element, you can use JavaScript code like document.getElementById('productPrice').textContent to get the price of a product from an element with the ID productPrice.
   • JavaScript object properties: If you’re accessing a property of a JavaScript object, you can specify the object path. For example, window.dataLayer[0].event to retrieve the event value from the first element in the dataLayer.

   Example:

   javascript

   Copy code

   window.dataLayer[0].pageCategory

2. After you’ve entered the JavaScript variable path, click Save to create the variable.

Step 5: Use the JavaScript Variable in Tags and Triggers

Now that your JavaScript variable is created, you can use it in Tags, Triggers, and other variables.

Example of using the JavaScript variable in a Tag:

1. Navigate to Tags in GTM and create or edit an existing tag.
2. In the tag configuration, when setting up the event or parameters, use the JavaScript variable you just created by selecting it from the list of available variables.
   • For instance, if your JavaScript variable is pulling the page category (pageCategory), you could use that as a value in a Google Analytics event tag to dynamically send the page category.

Example of using the JavaScript variable in a Trigger:

1. You can also use the JavaScript variable as a condition in a trigger. For example, if you want a trigger to fire only when a certain page category is available, use your JavaScript variable in the Trigger Configuration.
   • For example, use a condition like {{pageCategory}} equals "product" to only trigger the tag on product pages.

Step 6: Test the JavaScript Variable

Before publishing the changes, it is important to test that the JavaScript variable is returning the correct values.

1. Click on Preview in GTM to enter the Preview mode.
2. Open the website you’re working on, and the GTM debug console will appear at the bottom of your page.
3. Navigate to the page where you expect the JavaScript variable to be fired.
4. Check the Variables section of the GTM Preview mode and look for the JavaScript variable you created. Ensure it is showing the correct value.
   • If it’s not working, you can troubleshoot by reviewing the JavaScript expression and making sure it’s valid.

Step 7: Publish the Container

Once you’ve verified the variable is working as expected, you can publish the changes:

1. After testing, click Submit in GTM to submit your changes.
2. Provide a version name (e.g., “JavaScript Variable Setup”).
3. Click Publish to make your changes live.

Examples of JavaScript Variables in Google Tag Manager

Here are some common use cases for JavaScript variables:

1. Get Page Title:

To capture the page title from the document:

2. Get URL Parameter (e.g., utm_source):

To capture the value of a URL parameter:

3. Get Product Price (from a specific element on the page):

To capture the product price from a DOM element:

4. Get Custom JavaScript Object Value (from a global object):

If you have a global object called window.pageData:

5. Get the Value of a Cookie:

To retrieve a cookie value:

Best Practices for JavaScript Variables in GTM

1. Ensure Valid JavaScript Expressions: Double-check the JavaScript variable path for accuracy. Incorrect expressions will result in errors or blank values.
2. Test Across Browsers: Ensure your JavaScript variable works across different browsers and devices.
3. Minimize Custom JavaScript: While custom JavaScript variables are powerful, use them only when necessary. Prefer built-in GTM variables and dataLayer pushes whenever possible, as they are more stable and performant.
4. Use Custom JavaScript Variables Sparingly: Custom JavaScript variables can sometimes introduce performance issues if not used carefully. Always evaluate if the data can be retrieved using a built-in variable or another more efficient method.

Conclusion

Configuring JavaScript variables in Google Tag Manager allows you to capture dynamic values from your website and leverage them in your tags and triggers. This flexibility makes GTM a powerful tool for tracking user interactions, e-commerce events, and other dynamic data. By following the steps outlined in this guide and testing thoroughly, you can effectively configure and use JavaScript variables to improve your tracking and analytics setup in GTM.