{"id":10558,"date":"2024-11-12T21:09:14","date_gmt":"2024-11-12T21:09:14","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10558"},"modified":"2024-11-12T21:09:14","modified_gmt":"2024-11-12T21:09:14","slug":"how-to-configure-javascript-variable-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/","title":{"rendered":"How to configure JavaScript variable in Google Tag Manager"},"content":{"rendered":"<p>Configuring a <strong>JavaScript variable<\/strong> 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\u2019s built-in variables.<\/p>\n<p>Here\u2019s a step-by-step guide on how to configure a JavaScript variable in Google Tag Manager:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_1_Log_in_to_Google_Tag_Manager\" title=\"Step 1: Log in to Google Tag Manager\">Step 1: Log in to Google Tag Manager<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_2_Navigate_to_Variables\" title=\"Step 2: Navigate to Variables\">Step 2: Navigate to Variables<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_3_Choose_the_Variable_Type\" title=\"Step 3: Choose the Variable Type\">Step 3: Choose the Variable Type<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_4_Define_the_JavaScript_Variable\" title=\"Step 4: Define the JavaScript Variable\">Step 4: Define the JavaScript Variable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_5_Use_the_JavaScript_Variable_in_Tags_and_Triggers\" title=\"Step 5: Use the JavaScript Variable in Tags and Triggers\">Step 5: Use the JavaScript Variable in Tags and Triggers<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Example_of_using_the_JavaScript_variable_in_a_Tag\" title=\"Example of using the JavaScript variable in a Tag:\">Example of using the JavaScript variable in a Tag:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Example_of_using_the_JavaScript_variable_in_a_Trigger\" title=\"Example of using the JavaScript variable in a Trigger:\">Example of using the JavaScript variable in a Trigger:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_6_Test_the_JavaScript_Variable\" title=\"Step 6: Test the JavaScript Variable\">Step 6: Test the JavaScript Variable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Step_7_Publish_the_Container\" title=\"Step 7: Publish the Container\">Step 7: Publish the Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Examples_of_JavaScript_Variables_in_Google_Tag_Manager\" title=\"Examples of JavaScript Variables in Google Tag Manager\">Examples of JavaScript Variables in Google Tag Manager<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#1_Get_Page_Title\" title=\"1. Get Page Title:\">1. Get Page Title:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#2_Get_URL_Parameter_eg_utm_source\" title=\"2. Get URL Parameter (e.g., utm_source):\">2. Get URL Parameter (e.g., utm_source):<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#3_Get_Product_Price_from_a_specific_element_on_the_page\" title=\"3. Get Product Price (from a specific element on the page):\">3. Get Product Price (from a specific element on the page):<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#4_Get_Custom_JavaScript_Object_Value_from_a_global_object\" title=\"4. Get Custom JavaScript Object Value (from a global object):\">4. Get Custom JavaScript Object Value (from a global object):<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#5_Get_the_Value_of_a_Cookie\" title=\"5. Get the Value of a Cookie:\">5. Get the Value of a Cookie:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Best_Practices_for_JavaScript_Variables_in_GTM\" title=\"Best Practices for JavaScript Variables in GTM\">Best Practices for JavaScript Variables in GTM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Log_in_to_Google_Tag_Manager\"><\/span>Step 1: Log in to Google Tag Manager<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Log in<\/strong> to your Google Tag Manager account.<\/li>\n<li>Select the <strong>container<\/strong> where you want to configure the JavaScript variable.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Navigate_to_Variables\"><\/span>Step 2: Navigate to Variables<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>In the left-hand side panel, click on <strong>Variables<\/strong>.<\/li>\n<li>In the Variables section, click <strong>New<\/strong> to create a new variable.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Choose_the_Variable_Type\"><\/span>Step 3: Choose the Variable Type<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>In the new variable setup, click on <strong>Variable Configuration<\/strong>.<\/li>\n<li>From the list of variable types, select <strong>JavaScript Variable<\/strong>.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Define_the_JavaScript_Variable\"><\/span>Step 4: Define the JavaScript Variable<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now you will need to configure the actual JavaScript that will pull the value from your website.<\/p>\n<ol>\n<li><strong>Enter the JavaScript variable path<\/strong> (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.\n<p>Examples of common JavaScript variable paths:<\/p>\n<ul>\n<li><strong>Global JavaScript variable<\/strong>: If the JavaScript variable is a global variable, you would enter the name of that variable. For example, if the global variable is <code>window.pageCategory<\/code>, you would enter <code>pageCategory<\/code>.<\/li>\n<li><strong>DOM Element<\/strong>: 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 <code>document.getElementById('productPrice').textContent<\/code> to get the price of a product from an element with the ID <code>productPrice<\/code>.<\/li>\n<li><strong>JavaScript object properties<\/strong>: If you&#8217;re accessing a property of a JavaScript object, you can specify the object path. For example, <code>window.dataLayer[0].event<\/code> to retrieve the <code>event<\/code> value from the first element in the dataLayer.<\/li>\n<\/ul>\n<p>Example:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span>[<span class=\"hljs-number\">0<\/span>].<span class=\"hljs-property\">pageCategory<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>After you\u2019ve entered the JavaScript variable path, click <strong>Save<\/strong> to create the variable.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Use_the_JavaScript_Variable_in_Tags_and_Triggers\"><\/span>Step 5: Use the JavaScript Variable in Tags and Triggers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that your JavaScript variable is created, you can use it in <strong>Tags<\/strong>, <strong>Triggers<\/strong>, and other variables.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Example_of_using_the_JavaScript_variable_in_a_Tag\"><\/span>Example of using the JavaScript variable in a Tag:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>Navigate to <strong>Tags<\/strong> in GTM and create or edit an existing tag.<\/li>\n<li>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.\n<ul>\n<li>For instance, if your JavaScript variable is pulling the page category (<code>pageCategory<\/code>), you could use that as a value in a Google Analytics event tag to dynamically send the page category.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Example_of_using_the_JavaScript_variable_in_a_Trigger\"><\/span>Example of using the JavaScript variable in a Trigger:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>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 <strong>Trigger Configuration<\/strong>.\n<ul>\n<li>For example, use a condition like <code>{{pageCategory}} equals \"product\"<\/code> to only trigger the tag on product pages.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_6_Test_the_JavaScript_Variable\"><\/span>Step 6: Test the JavaScript Variable<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before publishing the changes, it is important to test that the JavaScript variable is returning the correct values.<\/p>\n<ol>\n<li>Click on <strong>Preview<\/strong> in GTM to enter the Preview mode.<\/li>\n<li>Open the website you\u2019re working on, and the GTM debug console will appear at the bottom of your page.<\/li>\n<li>Navigate to the page where you expect the JavaScript variable to be fired.<\/li>\n<li>Check the <strong>Variables<\/strong> section of the GTM Preview mode and look for the JavaScript variable you created. Ensure it is showing the correct value.\n<ul>\n<li>If it\u2019s not working, you can troubleshoot by reviewing the JavaScript expression and making sure it\u2019s valid.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_7_Publish_the_Container\"><\/span>Step 7: Publish the Container<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you\u2019ve verified the variable is working as expected, you can publish the changes:<\/p>\n<ol>\n<li>After testing, click <strong>Submit<\/strong> in GTM to submit your changes.<\/li>\n<li>Provide a version name (e.g., &#8220;JavaScript Variable Setup&#8221;).<\/li>\n<li>Click <strong>Publish<\/strong> to make your changes live.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Examples_of_JavaScript_Variables_in_Google_Tag_Manager\"><\/span>Examples of JavaScript Variables in Google Tag Manager<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Here are some common use cases for JavaScript variables:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_Get_Page_Title\"><\/span>1. Get Page Title:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To capture the page title from the document:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">title<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"2_Get_URL_Parameter_eg_utm_source\"><\/span>2. Get URL Parameter (e.g., <code>utm_source<\/code>):<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To capture the value of a URL parameter:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\">(<span class=\"hljs-keyword\">function<\/span>() {<br \/>\n  <span class=\"hljs-keyword\">var<\/span> urlParams = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">URLSearchParams<\/span>(<span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">search<\/span>);<br \/>\n  <span class=\"hljs-keyword\">return<\/span> urlParams.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'utm_source'<\/span>);<br \/>\n})();<br \/>\n<\/code><\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"3_Get_Product_Price_from_a_specific_element_on_the_page\"><\/span>3. Get Product Price (from a specific element on the page):<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To capture the product price from a DOM element:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelector<\/span>(<span class=\"hljs-string\">'.product-price'<\/span>).<span class=\"hljs-property\">textContent<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"4_Get_Custom_JavaScript_Object_Value_from_a_global_object\"><\/span>4. Get Custom JavaScript Object Value (from a global object):<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If you have a global object called <code>window.pageData<\/code>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">pageData<\/span>.<span class=\"hljs-property\">productName<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"5_Get_the_Value_of_a_Cookie\"><\/span>5. Get the Value of a Cookie:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To retrieve a cookie value:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\">(<span class=\"hljs-keyword\">function<\/span>() {<br \/>\n  <span class=\"hljs-keyword\">var<\/span> match = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">cookie<\/span>.<span class=\"hljs-title function_\">match<\/span>(<span class=\"hljs-string\">'(^|;) ?'<\/span> + <span class=\"hljs-string\">'cookieName'<\/span> + <span class=\"hljs-string\">'=([^;]*)(;|$)'<\/span>);<br \/>\n  <span class=\"hljs-keyword\">return<\/span> match ? match[<span class=\"hljs-number\">2<\/span>] : <span class=\"hljs-literal\">null<\/span>;<br \/>\n})();<br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Best_Practices_for_JavaScript_Variables_in_GTM\"><\/span>Best Practices for JavaScript Variables in GTM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Ensure Valid JavaScript Expressions<\/strong>: Double-check the JavaScript variable path for accuracy. Incorrect expressions will result in errors or blank values.<\/li>\n<li><strong>Test Across Browsers<\/strong>: Ensure your JavaScript variable works across different browsers and devices.<\/li>\n<li><strong>Minimize Custom JavaScript<\/strong>: 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.<\/li>\n<li><strong>Use Custom JavaScript Variables Sparingly<\/strong>: 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.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-10558","post","type-post","status-publish","format-standard","hentry","category-digital-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"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...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-12T21:09:14+00:00\" \/>\n<meta name=\"author\" content=\"Emmanuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/\",\"name\":\"How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-12T21:09:14+00:00\",\"dateModified\":\"2024-11-12T21:09:14+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to configure JavaScript variable in Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\",\"url\":\"https:\/\/ceowebltd.com\/blog\/\",\"name\":\"CEOweb Ltd. Blog\",\"description\":\"Guest Posting - Digital Marketing &amp; Web Services\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\",\"name\":\"Emmanuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"caption\":\"Emmanuel\"},\"url\":\"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog","og_description":"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...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-12T21:09:14+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/","name":"How to configure JavaScript variable in Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-12T21:09:14+00:00","dateModified":"2024-11-12T21:09:14+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-javascript-variable-in-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to configure JavaScript variable in Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/ceowebltd.com\/blog\/#website","url":"https:\/\/ceowebltd.com\/blog\/","name":"CEOweb Ltd. Blog","description":"Guest Posting - Digital Marketing &amp; Web Services","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f","name":"Emmanuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","caption":"Emmanuel"},"url":"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/"}]}},"_links":{"self":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/comments?post=10558"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10558\/revisions"}],"predecessor-version":[{"id":10559,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10558\/revisions\/10559"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}