{"id":10450,"date":"2024-11-07T23:38:05","date_gmt":"2024-11-07T23:38:05","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10450"},"modified":"2024-11-07T23:38:05","modified_gmt":"2024-11-07T23:38:05","slug":"how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/","title":{"rendered":"How to set up tracking for single-page applications (SPA) with Google Tag Manager"},"content":{"rendered":"<p>Tracking a <strong>Single-Page Application (SPA)<\/strong> with Google Tag Manager (GTM) can be tricky compared to traditional multi-page websites because SPAs load content dynamically without reloading the entire page. This means that GTM\u2019s default pageview triggers won\u2019t work as expected, as they rely on full page reloads to trigger tags.<\/p>\n<p>However, with the right configuration, you can track user interactions and pageviews on a SPA in Google Tag Manager. Here\u2019s how you can set up tracking for SPAs using 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-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#1_Set_up_GTM_in_Your_SPA\" title=\"1. Set up GTM in Your SPA\">1. Set up GTM in Your SPA<\/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-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#2_Use_the_History_Change_Trigger_for_SPAs\" title=\"2. Use the History Change Trigger for SPAs\">2. Use the History Change Trigger for SPAs<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#Steps_to_configure_a_History_Change_Trigger\" title=\"Steps to configure a History Change Trigger:\">Steps to configure a History Change Trigger:<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#3_Push_Custom_Events_to_the_Data_Layer\" title=\"3. Push Custom Events to the Data Layer\">3. Push Custom Events to the Data Layer<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#Example_Push_a_Custom_Event_for_Page_View\" title=\"Example: Push a Custom Event for Page View\">Example: Push a Custom Event for Page View<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#Example_Push_a_Custom_Event_for_Button_Click\" title=\"Example: Push a Custom Event for Button Click\">Example: Push a Custom Event for Button Click<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#4_Track_Virtual_Pageviews_for_Analytics\" title=\"4. Track Virtual Pageviews for Analytics\">4. Track Virtual Pageviews for Analytics<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#Steps_to_configure_virtual_pageviews\" title=\"Steps to configure virtual pageviews:\">Steps to configure virtual pageviews:<\/a><\/li><\/ul><\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#5_Use_GTM_Variables_to_Capture_Dynamic_Data\" title=\"5. Use GTM Variables to Capture Dynamic Data\">5. Use GTM Variables to Capture Dynamic Data<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#6_Test_the_Setup_Using_GTMs_Preview_Mode\" title=\"6. Test the Setup Using GTM\u2019s Preview Mode\">6. Test the Setup Using 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-11\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#7_Additional_Considerations\" title=\"7. Additional Considerations\">7. Additional Considerations<\/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-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_Set_up_GTM_in_Your_SPA\"><\/span>1. <strong>Set up GTM in Your SPA<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before diving into specific SPA tracking, you need to ensure Google Tag Manager is properly installed on your Single-Page Application. The steps are the same as for a regular website:<\/p>\n<ul>\n<li>Create a GTM account and container.<\/li>\n<li>Add the GTM container code to your site&#8217;s <code>&lt;head&gt;<\/code> and <code>&lt;body&gt;<\/code> sections, just like you would for any other site.<\/li>\n<\/ul>\n<p>After that, you can proceed to configure your tags and triggers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Use_the_History_Change_Trigger_for_SPAs\"><\/span>2. <strong>Use the History Change Trigger for SPAs<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The most critical thing for SPA tracking is that the page isn\u2019t reloading with each new view or interaction. Instead, the URL changes dynamically with JavaScript, often using <strong>pushState<\/strong> or <strong>replaceState<\/strong> to alter the browser\u2019s history without actually loading a new page. To handle this in GTM, you\u2019ll need to track changes in the browser\u2019s history, which occur without traditional page reloads.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_configure_a_History_Change_Trigger\"><\/span>Steps to configure a History Change Trigger:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>Step 1<\/strong>: Create a trigger for <strong>History Changes<\/strong>:\n<ul>\n<li>Go to your GTM account and click <strong>Triggers<\/strong>.<\/li>\n<li>Click <strong>New<\/strong>, and then choose <strong>Page View<\/strong>.<\/li>\n<li>Select the <strong>History Change<\/strong> option.<\/li>\n<li>Set the trigger to fire on <strong>All History Changes<\/strong> or specify conditions if needed (e.g., you may want to only track specific paths).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Step 2<\/strong>: Apply the History Change trigger to the tags you want to track, such as Google Analytics or other analytics tools.<\/li>\n<\/ul>\n<p>This trigger allows GTM to fire tags whenever the browser&#8217;s history changes \u2014 which is typical in SPAs when users navigate to different &#8220;pages&#8221; without triggering a full reload.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Push_Custom_Events_to_the_Data_Layer\"><\/span>3. <strong>Push Custom Events to the Data Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another key aspect of SPA tracking is tracking user interactions, like clicks, form submissions, or scrolls, within the application. These interactions don&#8217;t necessarily trigger a new URL change but should still be tracked as events.<\/p>\n<p>You can <strong>push custom events<\/strong> into the Data Layer in response to specific user actions. When an event occurs in your SPA (e.g., a button click, a form submission, or a view change), push a custom event to the GTM Data Layer to trigger tags.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Example_Push_a_Custom_Event_for_Page_View\"><\/span>Example: Push a Custom Event for Page View<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If you want to track custom pageviews or virtual pageviews (when users navigate within the SPA but not to a full page reload), you can push these to the Data Layer as follows:<\/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-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span> || [];<br \/>\n<span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span>.<span class=\"hljs-title function_\">push<\/span>({<br \/>\n  <span class=\"hljs-attr\">event<\/span>: <span class=\"hljs-string\">'virtualPageView'<\/span>,<br \/>\n  <span class=\"hljs-attr\">pagePath<\/span>: <span class=\"hljs-string\">'\/new-page'<\/span>,  <span class=\"hljs-comment\">\/\/ The new virtual page path<\/span><br \/>\n  <span class=\"hljs-attr\">pageTitle<\/span>: <span class=\"hljs-string\">'New Page Title'<\/span>  <span class=\"hljs-comment\">\/\/ The title of the page<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<p>Once this custom event is pushed to the Data Layer, you can create a trigger in GTM that listens for the <strong>virtualPageView<\/strong> event:<\/p>\n<ul>\n<li><strong>Step 1<\/strong>: Go to <strong>Triggers<\/strong> in GTM and create a <strong>Custom Event<\/strong> trigger.<\/li>\n<li><strong>Step 2<\/strong>: Set the event name to match the custom event pushed into the Data Layer (e.g., <code>virtualPageView<\/code>).<\/li>\n<li><strong>Step 3<\/strong>: Add the trigger to any tags that need to fire on that custom event (such as Google Analytics or Facebook Pixel).<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"Example_Push_a_Custom_Event_for_Button_Click\"><\/span>Example: Push a Custom Event for Button Click<span class=\"ez-toc-section-end\"><\/span><\/h4>\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-title function_\">push<\/span>({<br \/>\n  <span class=\"hljs-attr\">event<\/span>: <span class=\"hljs-string\">'buttonClick'<\/span>,<br \/>\n  <span class=\"hljs-attr\">buttonName<\/span>: <span class=\"hljs-string\">'Subscribe Now'<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<p>Then, in GTM, create a trigger that listens for the <code>buttonClick<\/code> event:<\/p>\n<ul>\n<li><strong>Step 1<\/strong>: Create a new trigger of type <strong>Custom Event<\/strong>.<\/li>\n<li><strong>Step 2<\/strong>: Set the event name to <code>buttonClick<\/code>.<\/li>\n<li><strong>Step 3<\/strong>: Attach this trigger to any tag that should fire when the button is clicked, such as a Google Analytics event tag.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"4_Track_Virtual_Pageviews_for_Analytics\"><\/span>4. <strong>Track Virtual Pageviews for Analytics<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For SPA tracking, you may want to track virtual pageviews \u2014 meaning each significant state or URL change in the SPA is treated as a pageview in Google Analytics or other analytics tools.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Steps_to_configure_virtual_pageviews\"><\/span>Steps to configure virtual pageviews:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>Step 1<\/strong>: Create a tag for <strong>Google Analytics Pageview<\/strong> in GTM.\n<ul>\n<li>Go to <strong>Tags<\/strong> &gt; <strong>New<\/strong> &gt; <strong>Google Analytics: Universal Analytics<\/strong>.<\/li>\n<li>Set <strong>Track Type<\/strong> to <strong>Page View<\/strong>.<\/li>\n<li>In the <strong>Page Path<\/strong>, use a <strong>Data Layer Variable<\/strong> to pull the virtual page path pushed to the Data Layer (e.g., <code>\/new-page<\/code>).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Step 2<\/strong>: Attach a <strong>History Change<\/strong> or custom event trigger to this pageview tag.<\/li>\n<li><strong>Step 3<\/strong>: Ensure that whenever the virtual pageview is triggered (by user interaction or URL changes), it correctly sends pageview data to Google Analytics.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"5_Use_GTM_Variables_to_Capture_Dynamic_Data\"><\/span>5. <strong>Use GTM Variables to Capture Dynamic Data<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since SPAs are often dynamically rendered, you might need to capture specific elements or values that change as users interact with the page. For example, tracking dynamic page titles, custom content, or interactions.<\/p>\n<p>You can create <strong>Variables<\/strong> in GTM to capture this dynamic data:<\/p>\n<ul>\n<li><strong>Page Title Variable<\/strong>: If your SPA dynamically updates the title of the page, create a <strong>Page Title<\/strong> variable in GTM.<\/li>\n<li><strong>URL Variables<\/strong>: If your SPA uses custom URL fragments or parameters, use GTM\u2019s built-in <strong>Page URL<\/strong> variable to capture them.<\/li>\n<\/ul>\n<p>These variables can be used within triggers or tags to dynamically adjust the data being sent.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Test_the_Setup_Using_GTMs_Preview_Mode\"><\/span>6. <strong>Test the Setup Using GTM\u2019s Preview Mode<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you&#8217;ve configured your triggers and tags for SPAs, it&#8217;s important to <strong>test<\/strong> them in GTM\u2019s <strong>Preview Mode<\/strong> before publishing the changes.<\/p>\n<p>In Preview Mode:<\/p>\n<ul>\n<li>Navigate through your SPA and verify that your tags are firing correctly on virtual pageviews or interactions.<\/li>\n<li>Check the Data Layer to confirm that events like <code>virtualPageView<\/code> or <code>buttonClick<\/code> are being pushed properly.<\/li>\n<li>Ensure that Google Analytics is receiving the correct data by checking the Real-Time reports.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"7_Additional_Considerations\"><\/span>7. <strong>Additional Considerations<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>SPA Frameworks<\/strong>: If you\u2019re using a specific SPA framework (e.g., React, Angular, Vue), you may need to adjust your tracking logic according to how the framework handles routing and dynamic content.\n<ul>\n<li>React: Use <strong>React Router<\/strong> and listen to route changes.<\/li>\n<li>Angular: Use Angular&#8217;s <strong>Router<\/strong> events.<\/li>\n<li>Vue: Use Vue Router and listen to route changes.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Google Analytics 4 (GA4)<\/strong>: If you&#8217;re using <strong>Google Analytics 4 (GA4)<\/strong>, the event-based data model requires a slightly different approach to virtual pageview tracking. You&#8217;ll still use the <strong>History Change<\/strong> trigger, but in GA4, you can push custom events into the Data Layer and use them for tracking pageviews or other interactions.<\/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 tracking for a Single-Page Application with Google Tag Manager requires a combination of history tracking, custom events, and data layer variables. The key is to adapt to the dynamic nature of SPAs by listening for changes to the URL, routing, and user interactions and ensuring that the appropriate tags fire based on these changes. By configuring GTM correctly, you can efficiently track pageviews, user interactions, and other important events in your SPA.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tracking a Single-Page Application (SPA) with Google Tag Manager (GTM) can be tricky compared to traditional multi-page websites because SPAs load content dynamically without reloading&#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-10450","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 tracking for single-page applications (SPA) with 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-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/\" \/>\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 tracking for single-page applications (SPA) with Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Tracking a Single-Page Application (SPA) with Google Tag Manager (GTM) can be tricky compared to traditional multi-page websites because SPAs load content dynamically without reloading...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-07T23:38:05+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<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-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/\",\"name\":\"How to set up tracking for single-page applications (SPA) with Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-07T23:38:05+00:00\",\"dateModified\":\"2024-11-07T23:38:05+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set up tracking for single-page applications (SPA) with 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 tracking for single-page applications (SPA) with 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-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/","og_locale":"en_US","og_type":"article","og_title":"How to set up tracking for single-page applications (SPA) with Google Tag Manager - CEOweb Ltd. Blog","og_description":"Tracking a Single-Page Application (SPA) with Google Tag Manager (GTM) can be tricky compared to traditional multi-page websites because SPAs load content dynamically without reloading...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-07T23:38:05+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/","name":"How to set up tracking for single-page applications (SPA) with Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-07T23:38:05+00:00","dateModified":"2024-11-07T23:38:05+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-set-up-tracking-for-single-page-applications-spa-with-google-tag-manager-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set up tracking for single-page applications (SPA) with 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\/10450","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=10450"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10450\/revisions"}],"predecessor-version":[{"id":10451,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10450\/revisions\/10451"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}