{"id":10791,"date":"2024-11-22T21:09:02","date_gmt":"2024-11-22T21:09:02","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10791"},"modified":"2024-11-22T21:09:02","modified_gmt":"2024-11-22T21:09:02","slug":"how-to-configure-google-tag-manager-for-single-page-applications-spas","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/","title":{"rendered":"How to configure Google Tag Manager for single-page applications (SPAs)"},"content":{"rendered":"<p>Configuring <strong>Google Tag Manager (GTM)<\/strong> for <strong>Single-Page Applications (SPAs)<\/strong> requires a slightly different approach compared to traditional websites. SPAs dynamically load content without refreshing the entire page, which presents challenges for GTM, as it relies on page views and events to trigger tags. However, by following these steps, you can ensure that GTM works properly with SPAs.<\/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-single-page-applications-spas\/#Steps_to_Configure_Google_Tag_Manager_for_SPAs\" title=\"Steps to Configure Google Tag Manager for SPAs:\">Steps to Configure Google Tag Manager 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-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#1_Understand_the_SPA_Behavior\" title=\"1. Understand the SPA Behavior\">1. Understand the SPA Behavior<\/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-single-page-applications-spas\/#2_Install_GTM_on_Your_SPA\" title=\"2. Install GTM on Your SPA\">2. Install GTM on Your SPA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#3_Configure_GTM_to_Track_Virtual_Page_Views\" title=\"3. Configure GTM to Track Virtual Page Views\">3. Configure GTM to Track Virtual Page Views<\/a><\/li><li class='ez-toc-page-1 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-single-page-applications-spas\/#4_Push_Data_to_the_Data_Layer\" title=\"4. Push Data to the Data Layer\">4. Push Data to the Data Layer<\/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-single-page-applications-spas\/#5_Setting_Up_Tags_for_Specific_Events\" title=\"5. Setting Up Tags for Specific Events\">5. Setting Up Tags for Specific Events<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#6_Handle_JavaScript_Events\" title=\"6. Handle JavaScript Events\">6. Handle JavaScript Events<\/a><\/li><li class='ez-toc-page-1 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-single-page-applications-spas\/#7_Use_GTMs_Built-in_Variables_and_Custom_JavaScript_Variables\" title=\"7. Use GTM\u2019s Built-in Variables and Custom JavaScript Variables\">7. Use GTM\u2019s Built-in Variables and Custom JavaScript Variables<\/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-single-page-applications-spas\/#8_Testing_and_Debugging\" title=\"8. Testing and Debugging\">8. Testing and Debugging<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#9_Consider_Using_a_Tag_Manager_API_Optional\" title=\"9. Consider Using a Tag Manager API (Optional)\">9. Consider Using a Tag Manager API (Optional)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#10_Use_Google_Analytics_GA4_with_SPA_Tracking\" title=\"10. Use Google Analytics (GA4) with SPA Tracking\">10. Use Google Analytics (GA4) with SPA Tracking<\/a><\/li><\/ul><\/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-single-page-applications-spas\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Steps_to_Configure_Google_Tag_Manager_for_SPAs\"><\/span>Steps to Configure Google Tag Manager for SPAs:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"1_Understand_the_SPA_Behavior\"><\/span>1. <strong>Understand the SPA Behavior<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>In a single-page app, only part of the page is updated when navigating between different views or sections, and no full page reload happens.<\/li>\n<li>GTM tracks page views and events through the browser\u2019s <code>window.onload<\/code> event, which won\u2019t trigger on SPA navigation.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"2_Install_GTM_on_Your_SPA\"><\/span>2. <strong>Install GTM on Your SPA<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Install the GTM container snippet on your site just as you would for a regular site. Typically, this goes in the <code>&lt;head&gt;<\/code> and <code>&lt;body&gt;<\/code> of your HTML.<\/li>\n<li>Ensure the GTM code is included on the initial load of the SPA.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"3_Configure_GTM_to_Track_Virtual_Page_Views\"><\/span>3. <strong>Configure GTM to Track Virtual Page Views<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Since SPAs do not perform full page reloads, you need to manually send page view events to GTM as users navigate through different sections of your app.<\/li>\n<li>Use GTM\u2019s <strong>History Change<\/strong> trigger to detect when the URL changes or when content dynamically updates. This can be used to track new virtual page views.\n<ul>\n<li><strong>Trigger Setup<\/strong>:\n<ol>\n<li>Create a new <strong>Custom Event Trigger<\/strong> in GTM.<\/li>\n<li>Set the event type to <code>History Change<\/code>.<\/li>\n<li>This trigger listens for changes in the browser\u2019s history state (<code>pushState<\/code> or <code>replaceState<\/code>), which is commonly used in SPAs to update the URL without a full page reload.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<li>To simulate a <strong>Page View<\/strong> in GTM:\n<ol>\n<li>Create a <strong>Page View Tag<\/strong> in GTM.<\/li>\n<li>For the <strong>Trigger<\/strong>, use the <strong>History Change<\/strong> trigger you just created.<\/li>\n<li>Set up the tag to fire on page views, capturing the page&#8217;s URL or title for reporting in Google Analytics or other platforms.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"4_Push_Data_to_the_Data_Layer\"><\/span>4. <strong>Push Data to the Data Layer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Use GTM\u2019s <strong>Data Layer<\/strong> to push dynamic data (e.g., page URLs, page titles, or specific events) every time a new view or change occurs in your SPA.\n<ul>\n<li>When navigating through different sections, push the necessary data to the GTM data layer, like so:\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\">dataLayer.<span class=\"hljs-title function_\">push<\/span>({<br \/>\n  <span class=\"hljs-string\">'event'<\/span>: <span class=\"hljs-string\">'pageview'<\/span>,<br \/>\n  <span class=\"hljs-string\">'pageTitle'<\/span>: <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">title<\/span>,<br \/>\n  <span class=\"hljs-string\">'pagePath'<\/span>: <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>This will ensure that GTM recognizes the change and triggers the appropriate tags based on the data passed in the layer.<\/li>\n<\/ul>\n<\/li>\n<li>You can push additional dynamic data as needed, such as:\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\">dataLayer.<span class=\"hljs-title function_\">push<\/span>({<br \/>\n  <span class=\"hljs-string\">'event'<\/span>: <span class=\"hljs-string\">'pageview'<\/span>,<br \/>\n  <span class=\"hljs-string\">'pageCategory'<\/span>: <span class=\"hljs-string\">'Product Page'<\/span>,<br \/>\n  <span class=\"hljs-string\">'pagePath'<\/span>: <span class=\"hljs-string\">'\/product\/123'<\/span>,<br \/>\n  <span class=\"hljs-string\">'pageTitle'<\/span>: <span class=\"hljs-string\">'Product 123'<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"5_Setting_Up_Tags_for_Specific_Events\"><\/span>5. <strong>Setting Up Tags for Specific Events<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Besides page views, SPAs often have other user interactions like clicks, form submissions, or other events. For these actions, you\u2019ll need to listen for them using custom triggers.<\/li>\n<li>For example, to track a button click:\n<ol>\n<li>Create a new <strong>Click Trigger<\/strong>.<\/li>\n<li>Specify the element you want to track (using element classes, IDs, or other selectors).<\/li>\n<li>Create a tag that fires when the specified element is clicked (for example, a \u201cBuy Now\u201d button).<\/li>\n<\/ol>\n<\/li>\n<li>Similarly, you can set up triggers for specific actions that are unique to the SPA, such as:\n<ul>\n<li>Navigation actions (e.g., selecting a new section within the app).<\/li>\n<li>Custom events emitted by your JavaScript when certain actions occur.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"6_Handle_JavaScript_Events\"><\/span>6. <strong>Handle JavaScript Events<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Many SPAs rely on custom JavaScript events or frameworks (e.g., Angular, React, Vue.js) to handle page changes or user interactions. If your SPA fires custom events on specific user actions, you can set up GTM to listen for these custom events.\n<ul>\n<li>Example:\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-title function_\">dispatchEvent<\/span>(<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">CustomEvent<\/span>(<span class=\"hljs-string\">'spaNavigation'<\/span>, {<br \/>\n  <span class=\"hljs-attr\">detail<\/span>: {<br \/>\n    <span class=\"hljs-attr\">page<\/span>: <span class=\"hljs-string\">'newPage'<\/span>,<br \/>\n    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'New Page Title'<\/span><br \/>\n  }<br \/>\n}));<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li>In GTM, set up a <strong>Custom Event Trigger<\/strong> to listen for the <code>spaNavigation<\/code> event and use it to trigger tags or push information to the data layer.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"7_Use_GTMs_Built-in_Variables_and_Custom_JavaScript_Variables\"><\/span>7. <strong>Use GTM\u2019s Built-in Variables and Custom JavaScript Variables<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>GTM allows you to use built-in variables like <code>Page URL<\/code>, <code>Page Path<\/code>, and <code>Page Title<\/code> to pull dynamic values when pushing data to tags.<\/li>\n<li>You can also use <strong>Custom JavaScript Variables<\/strong> to grab values from your SPA\u2019s state if they\u2019re not automatically available in the DOM or URL.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"8_Testing_and_Debugging\"><\/span>8. <strong>Testing and Debugging<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>GTM provides a <strong>Preview Mode<\/strong>, which is essential for testing and debugging your setup.<\/li>\n<li>Use the <strong>Preview Mode<\/strong> to test whether your tags are firing correctly after navigation events. You\u2019ll be able to see the exact triggers that have fired and the data layer values in real time.<\/li>\n<li>For SPAs, make sure to test:\n<ul>\n<li>Whether page views are being tracked correctly with virtual pageviews.<\/li>\n<li>Whether custom events, button clicks, or form submissions are properly recorded.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"9_Consider_Using_a_Tag_Manager_API_Optional\"><\/span>9. <strong>Consider Using a Tag Manager API (Optional)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>For more advanced configurations, you can use GTM\u2019s <strong>API<\/strong> to programmatically push data or manage tags based on SPA navigation events.<\/li>\n<li>This is generally more complex and requires development skills but can provide greater control over how tags are managed and triggered.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"10_Use_Google_Analytics_GA4_with_SPA_Tracking\"><\/span>10. <strong>Use Google Analytics (GA4) with SPA Tracking<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>When using Google Analytics (GA4) in conjunction with GTM for SPAs, ensure that you set up <strong>virtual pageviews<\/strong> properly to track user interactions across different sections of the app. GA4 uses event-based tracking, so each time a page state changes, send a custom event to GA4 (e.g., <code>page_view<\/code>).<\/li>\n<li>Example GA4 tag setup in GTM:\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-title function_\">gtag<\/span>(<span class=\"hljs-string\">'event'<\/span>, <span class=\"hljs-string\">'page_view'<\/span>, {<br \/>\n  <span class=\"hljs-string\">'page_location'<\/span>: <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">href<\/span>,<br \/>\n  <span class=\"hljs-string\">'page_title'<\/span>: <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-property\">title<\/span>,<br \/>\n  <span class=\"hljs-string\">'page_path'<\/span>: <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">location<\/span>.<span class=\"hljs-property\">pathname<\/span><br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<hr \/>\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 for single-page applications (SPAs) involves understanding how SPAs work and leveraging GTM\u2019s triggers and the data layer to simulate page views and track events dynamically. By using techniques such as <strong>History Change triggers<\/strong>, <strong>Custom Events<\/strong>, and <strong>Data Layer pushes<\/strong>, you can ensure that your tags fire correctly and provide accurate tracking and insights. Make sure to test thoroughly using GTM\u2019s preview mode to confirm that your configuration is working as expected.<\/p>\n<p>This setup is crucial for accurately tracking user interactions in SPAs, helping you gather meaningful data that can improve user experience, performance analysis, and marketing efforts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Configuring Google Tag Manager (GTM) for Single-Page Applications (SPAs) requires a slightly different approach compared to traditional websites. SPAs dynamically load content without refreshing the&#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-10791","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 single-page applications (SPAs) - 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-single-page-applications-spas\/\" \/>\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 single-page applications (SPAs) - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Configuring Google Tag Manager (GTM) for Single-Page Applications (SPAs) requires a slightly different approach compared to traditional websites. SPAs dynamically load content without refreshing the...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-22T21:09:02+00:00\" \/>\n<meta name=\"author\" content=\"Emmanuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/\",\"name\":\"How to configure Google Tag Manager for single-page applications (SPAs) - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-22T21:09:02+00:00\",\"dateModified\":\"2024-11-22T21:09:02+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#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 single-page applications (SPAs)\"}]},{\"@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 single-page applications (SPAs) - 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-single-page-applications-spas\/","og_locale":"en_US","og_type":"article","og_title":"How to configure Google Tag Manager for single-page applications (SPAs) - CEOweb Ltd. Blog","og_description":"Configuring Google Tag Manager (GTM) for Single-Page Applications (SPAs) requires a slightly different approach compared to traditional websites. SPAs dynamically load content without refreshing the...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-22T21:09:02+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/","name":"How to configure Google Tag Manager for single-page applications (SPAs) - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-22T21:09:02+00:00","dateModified":"2024-11-22T21:09:02+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-configure-google-tag-manager-for-single-page-applications-spas\/#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 single-page applications (SPAs)"}]},{"@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\/10791","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=10791"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10791\/revisions"}],"predecessor-version":[{"id":10792,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10791\/revisions\/10792"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}