{"id":10764,"date":"2024-11-21T20:12:34","date_gmt":"2024-11-21T20:12:34","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10764"},"modified":"2024-11-21T20:12:34","modified_gmt":"2024-11-21T20:12:34","slug":"how-to-configure-google-tag-manager-for-react-applications","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/","title":{"rendered":"How to configure Google Tag Manager for React applications"},"content":{"rendered":"<p>Configuring Google Tag Manager (GTM) for a React application requires a few specific steps, as React apps are often single-page applications (SPAs), meaning they do not reload the page when navigating between views. This introduces a few complexities when setting up GTM, especially with event tracking and pageviews. Below is a step-by-step guide on how to set up Google Tag Manager for a React application.<\/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-google-tag-manager-for-react-applications\/#Step_1_Install_Google_Tag_Manager_in_Your_React_Application\" title=\"Step 1: Install Google Tag Manager in Your React Application\">Step 1: Install Google Tag Manager in Your React Application<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#a_Create_a_Google_Tag_Manager_Account\" title=\"a. Create a Google Tag Manager Account\">a. Create a Google Tag Manager Account<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#b_Add_the_GTM_Code_to_Your_React_App\" title=\"b. Add the GTM Code to Your React App\">b. Add the GTM Code to Your React App<\/a><\/li><\/ul><\/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-google-tag-manager-for-react-applications\/#Step_2_Install_the_react-gtm-module_Library_Optional\" title=\"Step 2: Install the react-gtm-module Library (Optional)\">Step 2: Install the react-gtm-module Library (Optional)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#a_Install_the_react-gtm-module_Library\" title=\"a. Install the react-gtm-module Library\">a. Install the react-gtm-module Library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#b_Configure_the_Library_in_Your_Application\" title=\"b. Configure the Library in Your Application\">b. Configure the Library in Your Application<\/a><\/li><\/ul><\/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-configure-google-tag-manager-for-react-applications\/#Step_3_Track_Pageviews_in_React_Handling_Single-Page_App_Navigation\" title=\"Step 3: Track Pageviews in React (Handling Single-Page App Navigation)\">Step 3: Track Pageviews in React (Handling Single-Page App Navigation)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#a_Use_React_Router_for_Navigation\" title=\"a. Use React Router for Navigation\">a. Use React Router for Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#b_Push_Custom_Page_Events_to_GTM_Optional\" title=\"b. Push Custom Page Events to GTM (Optional)\">b. Push Custom Page Events to GTM (Optional)<\/a><\/li><\/ul><\/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-google-tag-manager-for-react-applications\/#Step_4_Set_Up_Triggers_and_Tags_in_Google_Tag_Manager\" title=\"Step 4: Set Up Triggers and Tags in Google Tag Manager\">Step 4: Set Up Triggers and Tags in Google Tag Manager<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#Step_5_Preview_and_Publish_Your_Changes\" title=\"Step 5: Preview and Publish Your Changes\">Step 5: Preview and Publish Your Changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Install_Google_Tag_Manager_in_Your_React_Application\"><\/span>Step 1: Install Google Tag Manager in Your React Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To get started, you need to add the GTM container code to your React app.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"a_Create_a_Google_Tag_Manager_Account\"><\/span>a. <strong>Create a Google Tag Manager Account<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>Go to <a href=\"https:\/\/tagmanager.google.com\/\" target=\"_new\" rel=\"noopener\">Google Tag Manager<\/a>.<\/li>\n<li>Create a new account and container for your website.<\/li>\n<li>You will be given a GTM container code, which looks 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\">html<\/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-html\"><span class=\"hljs-comment\">&lt;!-- Google Tag Manager --&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.googletagmanager.com\/gtm.js?id=GTM-XXXXXX\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">noscript<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-XXXXXX\"<\/span><br \/>\n<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display:none;visibility:hidden\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">noscript<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-comment\">&lt;!-- End Google Tag Manager --&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"b_Add_the_GTM_Code_to_Your_React_App\"><\/span>b. <strong>Add the GTM Code to Your React App<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In your React app, you should inject the GTM code in both the <code>&lt;head&gt;<\/code> and <code>&lt;body&gt;<\/code> sections:<\/p>\n<ol>\n<li>Open <code>public\/index.html<\/code> in your React app.<\/li>\n<li>Add the following script just before the closing <code>&lt;\/head&gt;<\/code> tag:\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\">html<\/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-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.googletagmanager.com\/gtm.js?id=GTM-XXXXXX\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>Add the <code>&lt;noscript&gt;<\/code> part right after the opening <code>&lt;body&gt;<\/code> tag:\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\">html<\/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-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">noscript<\/span>&gt;<\/span><br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-XXXXXX\"<\/span><br \/>\n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display:none;visibility:hidden\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">noscript<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Install_the_react-gtm-module_Library_Optional\"><\/span>Step 2: Install the <code>react-gtm-module<\/code> Library (Optional)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While you can manually insert GTM into your React app, using a React-specific module like <code>react-gtm-module<\/code> simplifies the integration and improves the overall React compatibility.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"a_Install_the_react-gtm-module_Library\"><\/span>a. <strong>Install the <code>react-gtm-module<\/code> Library<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You can install the <code>react-gtm-module<\/code> library using npm or yarn:<\/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\">bash<\/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-bash\">npm install react-gtm-module<br \/>\n<\/code><\/div>\n<\/div>\n<p>or<\/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\">bash<\/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-bash\">yarn add react-gtm-module<br \/>\n<\/code><\/div>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"b_Configure_the_Library_in_Your_Application\"><\/span>b. <strong>Configure the Library in Your Application<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In your <code>src\/index.js<\/code> or <code>src\/App.js<\/code>, initialize the GTM module as soon as your app loads:<\/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\">import<\/span> <span class=\"hljs-title class_\">React<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;<br \/>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">ReactDOM<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom'<\/span>;<br \/>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">App<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/App'<\/span>;<br \/>\n<span class=\"hljs-keyword\">import<\/span> { <span class=\"hljs-title class_\">GTMContainer<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-gtm-module'<\/span>;<\/p>\n<p><span class=\"hljs-keyword\">const<\/span> gtmId = <span class=\"hljs-string\">'GTM-XXXXXX'<\/span>; <span class=\"hljs-comment\">\/\/ Replace with your GTM container ID<\/span><\/p>\n<p><span class=\"hljs-comment\">\/\/ Initialize GTM<\/span><br \/>\n<span class=\"hljs-title class_\">GTMContainer<\/span>.<span class=\"hljs-title function_\">initialize<\/span>({ gtmId });<\/p>\n<p><span class=\"hljs-title class_\">ReactDOM<\/span>.<span class=\"hljs-title function_\">render<\/span>(<br \/>\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">React.StrictMode<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span><br \/>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">React.StrictMode<\/span>&gt;<\/span><\/span>,<br \/>\n  <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'root'<\/span>)<br \/>\n);<br \/>\n<\/code><\/div>\n<\/div>\n<p>This will set up Google Tag Manager when the app loads, ensuring that it works correctly for all subsequent pageviews and events.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Track_Pageviews_in_React_Handling_Single-Page_App_Navigation\"><\/span>Step 3: Track Pageviews in React (Handling Single-Page App Navigation)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since React is a single-page application (SPA), it does not reload the page for each new route. Therefore, tracking pageviews with GTM requires you to manually push virtual pageview events to GTM whenever the user navigates to a different route.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"a_Use_React_Router_for_Navigation\"><\/span>a. <strong>Use React Router for Navigation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If you&#8217;re using React Router to handle navigation in your app, you can listen for route changes and push a pageview event to GTM whenever the user navigates to a new route.<\/p>\n<p>Here\u2019s how to set up the pageview tracking:<\/p>\n<ol>\n<li><strong>Use React Router&#8217;s <code>useEffect<\/code> Hook<\/strong><\/li>\n<\/ol>\n<p>In your <code>App.js<\/code> or another top-level component, import <code>useEffect<\/code> from React and <code>useLocation<\/code> from React Router to listen for route changes:<\/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\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useEffect } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;<br \/>\n<span class=\"hljs-keyword\">import<\/span> { useLocation } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-router-dom'<\/span>;<br \/>\n<span class=\"hljs-keyword\">import<\/span> { <span class=\"hljs-title class_\">GTMContainer<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-gtm-module'<\/span>;<\/p>\n<p><span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">App<\/span> = () =&gt; {<br \/>\n  <span class=\"hljs-keyword\">const<\/span> location = <span class=\"hljs-title function_\">useLocation<\/span>();<\/p>\n<p>  <span class=\"hljs-title function_\">useEffect<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {<br \/>\n    <span class=\"hljs-comment\">\/\/ Push the pageview event to GTM whenever the location changes<\/span><br \/>\n    <span class=\"hljs-keyword\">const<\/span> pageviewData = {<br \/>\n      <span class=\"hljs-attr\">event<\/span>: <span class=\"hljs-string\">'pageview'<\/span>,<br \/>\n      <span class=\"hljs-attr\">pagePath<\/span>: location.<span class=\"hljs-property\">pathname<\/span>,<br \/>\n      <span class=\"hljs-attr\">pageTitle<\/span>: <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">title<\/span>,<br \/>\n    };<br \/>\n    <span class=\"hljs-title class_\">GTMContainer<\/span>.<span class=\"hljs-title function_\">pushDataLayer<\/span>(pageviewData);<br \/>\n  }, [location]);<\/p>\n<p>  <span class=\"hljs-keyword\">return<\/span> (<br \/>\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"App\"<\/span>&gt;<\/span><br \/>\n      {\/* Your React app content *\/}<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><br \/>\n  );<br \/>\n};<\/p>\n<p><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">App<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<p>This setup ensures that every time the route changes (when the user navigates between different pages), a pageview event is pushed to GTM, including the updated <code>pathname<\/code> and <code>title<\/code>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"b_Push_Custom_Page_Events_to_GTM_Optional\"><\/span>b. <strong>Push Custom Page Events to GTM (Optional)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If you need to track additional custom events (e.g., user interactions, form submissions), you can push events to the GTM data layer like this:<\/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\">const<\/span> <span class=\"hljs-title function_\">handleButtonClick<\/span> = () =&gt; {<br \/>\n  <span class=\"hljs-keyword\">const<\/span> eventData = {<br \/>\n    <span class=\"hljs-attr\">event<\/span>: <span class=\"hljs-string\">'button_click'<\/span>,<br \/>\n    <span class=\"hljs-attr\">buttonId<\/span>: <span class=\"hljs-string\">'cta-button'<\/span>,<br \/>\n  };<br \/>\n  <span class=\"hljs-title class_\">GTMContainer<\/span>.<span class=\"hljs-title function_\">pushDataLayer<\/span>(eventData);<br \/>\n};<br \/>\n<\/code><\/div>\n<\/div>\n<p>In this example, a custom event (<code>button_click<\/code>) is sent to GTM when a user clicks a button with the ID <code>cta-button<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Set_Up_Triggers_and_Tags_in_Google_Tag_Manager\"><\/span>Step 4: Set Up Triggers and Tags in Google Tag Manager<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that you&#8217;ve set up GTM to track pageviews and custom events in your React app, you need to configure your triggers and tags in the GTM interface:<\/p>\n<ol>\n<li><strong>Set up a Pageview Trigger<\/strong>:\n<ul>\n<li>Go to GTM &gt; Triggers &gt; New.<\/li>\n<li>Choose the trigger type <strong>Page View<\/strong> and configure it to fire on <strong>All Pages<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Set up Custom Event Triggers<\/strong>:\n<ul>\n<li>Go to GTM &gt; Triggers &gt; New.<\/li>\n<li>Choose <strong>Custom Event<\/strong>.<\/li>\n<li>Set the <strong>Event Name<\/strong> to match the event you are pushing to GTM, such as <code>button_click<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create Tags to Fire Based on These Triggers<\/strong>:\n<ul>\n<li>For each trigger, create a tag that sends the data to your preferred analytics or tracking platform (e.g., Google Analytics, Facebook Pixel).<\/li>\n<li>Example: Create a tag for Google Analytics to track pageviews or custom events.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Preview_and_Publish_Your_Changes\"><\/span>Step 5: Preview and Publish Your Changes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>After setting up the triggers and tags, use GTM&#8217;s <strong>Preview Mode<\/strong> to test whether your pageviews and custom events are being tracked correctly:<\/p>\n<ol>\n<li>In GTM, click on <strong>Preview<\/strong> to enter preview mode.<\/li>\n<li>Open your React app in a new browser tab.<\/li>\n<li>Use the GTM Debugger to verify that the tags are firing when expected (i.e., when navigating between pages or triggering events).<\/li>\n<\/ol>\n<p>Once you\u2019ve confirmed everything is working correctly, click <strong>Publish<\/strong> in GTM to make your changes live.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Setting up Google Tag Manager in a React application involves adding the GTM container code to your app, configuring pageview tracking to handle route changes in a single-page app, and setting up custom event tracking. By using libraries like <code>react-gtm-module<\/code> and leveraging React Router&#8217;s hooks, you can ensure that GTM works seamlessly in your React app. This allows you to track user interactions, monitor performance, and optimize your app based on real-time data from GTM.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Configuring Google Tag Manager (GTM) for a React application requires a few specific steps, as React apps are often single-page applications (SPAs), meaning they do&#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-10764","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 Google Tag Manager for React applications - 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-google-tag-manager-for-react-applications\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to configure Google Tag Manager for React applications - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Configuring Google Tag Manager (GTM) for a React application requires a few specific steps, as React apps are often single-page applications (SPAs), meaning they do...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-21T20:12:34+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=\"4 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-google-tag-manager-for-react-applications\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/\",\"name\":\"How to configure Google Tag Manager for React applications - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-21T20:12:34+00:00\",\"dateModified\":\"2024-11-21T20:12:34+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to configure Google Tag Manager for React applications\"}]},{\"@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 Google Tag Manager for React applications - 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-google-tag-manager-for-react-applications\/","og_locale":"en_US","og_type":"article","og_title":"How to configure Google Tag Manager for React applications - CEOweb Ltd. Blog","og_description":"Configuring Google Tag Manager (GTM) for a React application requires a few specific steps, as React apps are often single-page applications (SPAs), meaning they do...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-21T20:12:34+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/","name":"How to configure Google Tag Manager for React applications - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-21T20:12:34+00:00","dateModified":"2024-11-21T20:12:34+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-react-applications\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to configure Google Tag Manager for React applications"}]},{"@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\/10764","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=10764"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10764\/revisions"}],"predecessor-version":[{"id":10765,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10764\/revisions\/10765"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}