{"id":10644,"date":"2024-11-16T10:23:21","date_gmt":"2024-11-16T10:23:21","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10644"},"modified":"2024-11-16T10:23:21","modified_gmt":"2024-11-16T10:23:21","slug":"how-to-set-up-custom-javascript-variables-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/","title":{"rendered":"How to set up custom JavaScript variables in Google Tag Manager"},"content":{"rendered":"<p>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.<\/p>\n<p>Here\u2019s a step-by-step guide on how to create and use custom JavaScript variables in GTM.<\/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-set-up-custom-javascript-variables-in-google-tag-manager\/#Step_1_Access_Google_Tag_Manager\" title=\"Step 1: Access Google Tag Manager\">Step 1: Access 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-set-up-custom-javascript-variables-in-google-tag-manager\/#Step_2_Create_a_Custom_JavaScript_Variable\" title=\"Step 2: Create a Custom JavaScript Variable\">Step 2: Create a Custom JavaScript Variable<\/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-set-up-custom-javascript-variables-in-google-tag-manager\/#Step_3_Use_the_Custom_JavaScript_Variable_in_Tags\" title=\"Step 3: Use the Custom JavaScript Variable in Tags\">Step 3: Use the Custom JavaScript Variable in Tags<\/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-set-up-custom-javascript-variables-in-google-tag-manager\/#Step_4_Test_the_Variable_in_GTMs_Preview_Mode\" title=\"Step 4: Test the Variable in GTM\u2019s Preview Mode\">Step 4: Test the Variable in GTM\u2019s Preview Mode<\/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-set-up-custom-javascript-variables-in-google-tag-manager\/#Step_5_Publish_Your_Changes\" title=\"Step 5: Publish Your Changes\">Step 5: Publish Your Changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#Use_Cases_for_Custom_JavaScript_Variables\" title=\"Use Cases for Custom JavaScript Variables\">Use Cases for Custom JavaScript Variables<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#Tips_and_Best_Practices\" title=\"Tips and Best Practices\">Tips and Best Practices<\/a><\/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-set-up-custom-javascript-variables-in-google-tag-manager\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Access_Google_Tag_Manager\"><\/span>Step 1: Access Google Tag Manager<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Login to Google Tag Manager<\/strong>: Go to the <a href=\"https:\/\/tagmanager.google.com\/\" target=\"_new\" rel=\"noopener\">Google Tag Manager dashboard<\/a> and log in to your account.<\/li>\n<li><strong>Select Your Container<\/strong>: Choose the appropriate container (the website or app where you want to implement the custom JavaScript variable).<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Create_a_Custom_JavaScript_Variable\"><\/span>Step 2: Create a Custom JavaScript Variable<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Navigate to Variables<\/strong>:\n<ul>\n<li>From the GTM sidebar, click on <strong>Variables<\/strong>.<\/li>\n<li>You\u2019ll see the <strong>User-Defined Variables<\/strong> section. This is where you can create new variables for use in tags and triggers.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create a New Variable<\/strong>:\n<ul>\n<li>Click on the <strong>New<\/strong> button to create a new variable.<\/li>\n<li>In the <strong>Variable Configuration<\/strong> window, choose <strong>Custom JavaScript<\/strong> as the variable type.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Write Your Custom JavaScript Code<\/strong>:\n<ul>\n<li>After selecting <strong>Custom JavaScript<\/strong>, you\u2019ll 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.<\/li>\n<li>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:\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> element = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelector<\/span>(<span class=\"hljs-string\">'.element-class'<\/span>); <span class=\"hljs-comment\">\/\/ Replace with the correct selector<\/span><br \/>\n  <span class=\"hljs-keyword\">return<\/span> element ? element.<span class=\"hljs-property\">textContent<\/span> : <span class=\"hljs-string\">'default value'<\/span>; <span class=\"hljs-comment\">\/\/ Returns text content if element exists<\/span><br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<p>In this example, the variable will return the text content of an element with the class <code>element-class<\/code>. If the element doesn\u2019t exist, it will return a default value.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Variable<\/strong>:\n<ul>\n<li>After entering the JavaScript code, click <strong>Save<\/strong> to create your custom JavaScript variable.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Use_the_Custom_JavaScript_Variable_in_Tags\"><\/span>Step 3: Use the Custom JavaScript Variable in Tags<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you\u2019ve 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\u2019s how to use the custom JavaScript variable in a tag:<\/p>\n<ol>\n<li><strong>Create or Edit a Tag<\/strong>:\n<ul>\n<li>Go to the <strong>Tags<\/strong> section in GTM and either create a new tag or edit an existing one (e.g., a Google Analytics tag).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Insert the Variable<\/strong>:\n<ul>\n<li>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:\n<ul>\n<li>In the <strong>Event Label<\/strong> field, you can select your custom JavaScript variable by clicking the variable icon (it looks like a Lego block) next to the input field.<\/li>\n<li>From the list of variables, select the custom JavaScript variable you created.<\/li>\n<\/ul>\n<p>This will pass the dynamic value from the JavaScript code into the tag, allowing you to track it in Google Analytics or other tools.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Set the Trigger<\/strong>:\n<ul>\n<li>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.<\/li>\n<li>Once your tag and trigger are set, click <strong>Save<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Test_the_Variable_in_GTMs_Preview_Mode\"><\/span>Step 4: Test the Variable in GTM\u2019s Preview Mode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before deploying the custom JavaScript variable live on your site, it\u2019s important to test it in <strong>Preview Mode<\/strong> to ensure it\u2019s working as expected.<\/p>\n<ol>\n<li><strong>Activate Preview Mode<\/strong>:\n<ul>\n<li>Click on the <strong>Preview<\/strong> button in GTM\u2019s top-right corner.<\/li>\n<li>Enter your website URL to enter <strong>Preview Mode<\/strong>.<\/li>\n<li>The GTM preview panel will appear on your site, showing detailed information about tags, triggers, and variables.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Verify the Custom JavaScript Variable<\/strong>:\n<ul>\n<li>Interact with your website to trigger the event or action that should capture the data for your custom JavaScript variable.<\/li>\n<li>Open the GTM preview panel and go to the <strong>Variables<\/strong> tab to check if the custom JavaScript variable returns the expected value.<\/li>\n<li>If the value is correct, this indicates that your custom JavaScript variable is set up properly.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Publish_Your_Changes\"><\/span>Step 5: Publish Your Changes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you\u2019ve confirmed that the custom JavaScript variable is working correctly in Preview Mode, you can <strong>Publish<\/strong> your changes.<\/p>\n<ol>\n<li><strong>Submit Changes<\/strong>:\n<ul>\n<li>After testing, click on the <strong>Submit<\/strong> button in GTM to push the changes to your live site.<\/li>\n<li>Add a version name and description (optional), then click <strong>Publish<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Use_Cases_for_Custom_JavaScript_Variables\"><\/span>Use Cases for Custom JavaScript Variables<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Custom JavaScript variables can be used in a variety of situations. Some common use cases include:<\/p>\n<ol>\n<li><strong>Extracting Page Information<\/strong>: You might want to capture information from the page, like a product ID, a user\u2019s membership level, or the content of a dynamic element. Example: Tracking a product ID from the page URL.\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\">'product_id'<\/span>) || <span class=\"hljs-string\">'no-product-id'<\/span>;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li><strong>Tracking Dynamic Data<\/strong>: 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.\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> inputField = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelector<\/span>(<span class=\"hljs-string\">'#input-field-id'<\/span>);<br \/>\n  <span class=\"hljs-keyword\">return<\/span> inputField ? inputField.<span class=\"hljs-property\">value<\/span> : <span class=\"hljs-string\">'no-value'<\/span>;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li><strong>Calculating Values<\/strong>: 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.\n<p>Example: Calculating the total price in the shopping cart.<\/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> priceElements = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelectorAll<\/span>(<span class=\"hljs-string\">'.cart-item-price'<\/span>);<br \/>\n  <span class=\"hljs-keyword\">var<\/span> total = <span class=\"hljs-number\">0<\/span>;<br \/>\n  priceElements.<span class=\"hljs-title function_\">forEach<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">item<\/span>) {<br \/>\n    total += <span class=\"hljs-built_in\">parseFloat<\/span>(item.<span class=\"hljs-property\">textContent<\/span>.<span class=\"hljs-title function_\">replace<\/span>(<span class=\"hljs-string\">'$'<\/span>, <span class=\"hljs-string\">''<\/span>).<span class=\"hljs-title function_\">trim<\/span>());<br \/>\n  });<br \/>\n  <span class=\"hljs-keyword\">return<\/span> total;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li><strong>User-Agent or Environment Detection<\/strong>: You can track information related to the user&#8217;s browser, device type, or environment.\n<p>Example: Tracking the user\u2019s device type (mobile or desktop).<\/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\">return<\/span> <span class=\"hljs-regexp\">\/Mobi|Android\/i<\/span>.<span class=\"hljs-title function_\">test<\/span>(navigator.<span class=\"hljs-property\">userAgent<\/span>) ? <span class=\"hljs-string\">'mobile'<\/span> : <span class=\"hljs-string\">'desktop'<\/span>;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Tips_and_Best_Practices\"><\/span>Tips and Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Error Handling<\/strong>: Always include error handling in your JavaScript code to ensure the variable returns a value even when the target element doesn\u2019t exist or the value can\u2019t be retrieved.\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-keyword\">function<\/span>() {<br \/>\n  <span class=\"hljs-keyword\">try<\/span> {<br \/>\n    <span class=\"hljs-keyword\">var<\/span> element = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelector<\/span>(<span class=\"hljs-string\">'.element-class'<\/span>);<br \/>\n    <span class=\"hljs-keyword\">return<\/span> element ? element.<span class=\"hljs-property\">textContent<\/span> : <span class=\"hljs-string\">'default value'<\/span>;<br \/>\n  } <span class=\"hljs-keyword\">catch<\/span> (e) {<br \/>\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">'error'<\/span>;<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li><strong>Avoid Personal Data<\/strong>: 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.<\/li>\n<li><strong>Optimization<\/strong>: Keep your JavaScript code simple and efficient to avoid slowing down page performance.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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\u2019s Preview Mode before publishing to ensure that everything works as expected.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#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-10644","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 set up custom JavaScript variables 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-set-up-custom-javascript-variables-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 set up custom JavaScript variables in Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"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...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-16T10:23:21+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-set-up-custom-javascript-variables-in-google-tag-manager\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/\",\"name\":\"How to set up custom JavaScript variables in Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-16T10:23:21+00:00\",\"dateModified\":\"2024-11-16T10:23:21+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set up custom JavaScript variables 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 set up custom JavaScript variables 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-set-up-custom-javascript-variables-in-google-tag-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to set up custom JavaScript variables in Google Tag Manager - CEOweb Ltd. Blog","og_description":"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...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-16T10:23:21+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-set-up-custom-javascript-variables-in-google-tag-manager\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/","name":"How to set up custom JavaScript variables in Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-16T10:23:21+00:00","dateModified":"2024-11-16T10:23:21+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-custom-javascript-variables-in-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set up custom JavaScript variables 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\/10644","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=10644"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10644\/revisions"}],"predecessor-version":[{"id":10645,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10644\/revisions\/10645"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}