{"id":52074,"date":"2019-10-16T09:12:07","date_gmt":"2019-10-16T07:12:07","guid":{"rendered":"https:\/\/www.humanlevel.com\/sin-categorizar\/como-medir-el-trafico-de-webs-spa-con-google-tag-manager-y-google-analytics.html"},"modified":"2023-10-30T11:47:10","modified_gmt":"2023-10-30T10:47:10","slug":"how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","status":"publish","type":"post","link":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","title":{"rendered":"How to measure SPA web traffic with Google Tag Manager and Google Analytics"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Index<\/p><ul class=\"toc_list\"><li><a href=\"#Tracking_a_SPA_using_Google_Tag_Manager_GTM\">Tracking a SPA using Google Tag Manager (GTM)<\/a><\/li><li><a href=\"#Tracking_a_SPA_by_adding_additional_JavaScript\">Tracking a SPA by adding additional JavaScript<\/a><ul><li><a href=\"#Implementation_without_additional_libraries\">Implementation without additional libraries<\/a><\/li><li><a href=\"#Implementation_with_Google8217s_autotrack_library\">Implementation with Google&#8217;s autotrack library<\/a><\/li><\/ul><\/li><li><a href=\"#Conclusion\">Conclusion<\/a><\/li><\/ul><\/div>\n<p>It is becoming more and more common to find websites programmed with <strong>full stack frameworks such as <a href=\"https:\/\/angular.io\" target=\"_blank\" rel=\"noopener noreferrer\">Angular<\/a>, <a href=\"https:\/\/es.react.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a> or <a href=\"https:\/\/vuejs.org\" target=\"_blank\" rel=\"noopener noreferrer\">Vue<\/a> <\/strong>that facilitate the implementation of <a href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/indexability-shadow-dom\" target=\"_blank\" rel=\"noopener noreferrer\">websites <\/a><strong>Single Page Application or SPA <\/strong>where, by default, <strong>tracking scripts only work when users land on the site from outside, <\/strong>but not during navigation. Here we are going to see different solutions to this problem.<\/p>\n<p>On a website <strong>SPA<\/strong>Unlike a classic Multiple Page Application (MPA) website, <strong>the JavaScript code included in the pages is not executed each time the user visits a new URL<\/strong>The user loads the web site for the first time in the browser.<\/p>\n<p>Once the user is already inside the website, <strong>JavaScript is not executed again during navigation, unless there is something in the code that forces it<\/strong>. This is a problem for <strong>the JavaScript<\/strong> used by <strong>the tracking tools<\/strong>, since they are <strong>only executed on initial load<\/strong>.<\/p>\n\n<p>Let&#8217;s see how to solve it in two possible ways:<\/p>\n<ol>\n<li>Configuring <a href=\"https:\/\/marketingplatform.google.com\/intl\/es\/about\/tag-manager\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Tag Manager<\/a>.<\/li>\n<li>Without using Google Tag Manager and adding additional JavaScript.<\/li>\n<\/ol>\n<p>Whichever form is chosen, we will need to detect, directly or indirectly, the calls to the <strong><em>history.pushstate<\/em><\/strong> method <strong>, responsible for the URL change by JavaScript in a SPA<\/strong>.<\/p>\n<p>Let&#8217;s see how to <strong>apply each solution to <a href=\"https:\/\/marketingplatform.google.com\/intl\/es\/about\/analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Analytics<\/a><\/strong>. In theory, what is explained below <strong>can be applied to other tracking scripts <\/strong>. However, depending on the specific case, it may be necessary to add something else.<\/p>\n<h2><span id=\"Tracking_a_SPA_using_Google_Tag_Manager_GTM\">Tracking a SPA using Google Tag Manager (GTM)<\/span><\/h2>\n<p>In the following example, <strong>we start from an already created Google Universal Analytics account and a GTM container that we will have installed on the website<\/strong>, according to Google&#8217;s instructions.<\/p>\n<p>First, we need to create <strong>a trigger that is fired when a page change occurs in the SPA <\/strong>. This can occur in three situations:<\/p>\n<ol>\n<li>When the user clicks on a link that causes the content and URL to change with JavaScript.<\/li>\n<li>When the user moves in the history with the browser buttons.<\/li>\n<li>When the user clicks on a button that causes a change of position in the history by programming.<\/li>\n<\/ol>\n<p>The trigger responsible for this is<strong>&#8220;Change in history<\/strong>&#8221; which we configure as follows:<\/p>\n<figure id=\"attachment_35279\" aria-describedby=\"caption-attachment-35279\" style=\"width: 705px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35279\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/activador-spa.png\" alt=\"Google Tag Manager SPA Activator\" width=\"705\" height=\"377\" \/><figcaption id=\"caption-attachment-35279\" class=\"wp-caption-text\">GTM SPA Activator<\/figcaption><\/figure>\n<p>We have given the trigger the name &#8220;SPA tracker&#8221; and marked it to be <strong>triggered by all events in the history<\/strong>. We save it and then, if we have not already done so, we should <strong>include the Google Analytics identifier in a constant<\/strong>, to have it available when configuring any tag:<\/p>\n<figure id=\"attachment_35282\" aria-describedby=\"caption-attachment-35282\" style=\"width: 462px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35282\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/constante.png\" alt=\"Google Tag Manager constant declaration\" width=\"462\" height=\"331\" \/><figcaption id=\"caption-attachment-35282\" class=\"wp-caption-text\">Declaration of constant in GTM<\/figcaption><\/figure>\n<p><strong>With each activation of a history event, an integrated variable of Google Tag Manager will be updated, which will tell us the path of the URL<\/strong> where we are and that we will find already configured as &#8220;Page Path&#8221;:<\/p>\n<figure id=\"attachment_35284\" aria-describedby=\"caption-attachment-35284\" style=\"width: 556px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35284\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/variables-integradas-gtm.png\" alt=\"GTM integrated variables\" width=\"556\" height=\"294\" \/><figcaption id=\"caption-attachment-35284\" class=\"wp-caption-text\">GTM integrated variables<\/figcaption><\/figure>\n<p>Now <strong>we create a variable of the type &#8220;Google Analytics Configuration&#8221;<\/strong> where we assign to the &#8220;page&#8221; field of Google Analytics, the integrated variable &#8220;Page Path&#8221;, and to the tracking identifier, the previously declared constant:<\/p>\n<figure id=\"attachment_35285\" aria-describedby=\"caption-attachment-35285\" style=\"width: 880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35285\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/variable-configuracion-analytics.png\" alt=\"GTM configuration variable\" width=\"880\" height=\"478\" srcset=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/variable-configuracion-analytics.png 880w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/variable-configuracion-analytics-720x391.png 720w, https:\/\/www.humanlevel.com\/wp-content\/uploads\/variable-configuracion-analytics-768x417.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption id=\"caption-attachment-35285\" class=\"wp-caption-text\">GTM configuration variable by assigning the pre-existing &#8220;Page Path&#8221; variable to the &#8220;page&#8221; field.<\/figcaption><\/figure>\n<p>We save the variable as &#8220;SPA Analytics Configuration&#8221; and we are ready to create <strong>the &#8220;Google Analytics&#8221; type tag<\/strong>, to which we will assign the configuration variable created in the previous step and the &#8220;SPA tracker&#8221; trigger:<\/p>\n<figure id=\"attachment_35288\" aria-describedby=\"caption-attachment-35288\" style=\"width: 426px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35288\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/etiqueta-spa-y-mpa.png\" alt=\"Google Analytics SPA tracking tag in GTM\" width=\"426\" height=\"569\" \/><figcaption id=\"caption-attachment-35288\" class=\"wp-caption-text\">Google Analytics SPA tracking tag in GTM<\/figcaption><\/figure>\n<p>We can see that <strong>we have also added the &#8220;All Pages&#8221; trigger<\/strong>, so that it <strong>is also triggered when entering a page<\/strong>. If we already had another Google Analytics tag configured with the same tracking ID and the &#8220;All Pages&#8221; trigger, we can either remove it or leave it and not add the &#8220;All Pages&#8221; trigger to the new tracking tag. In the latter case, we could have a different configuration for the MPA and SPA pages of the web, while if we do it as in the screenshot, the configuration will be unified.<\/p>\n<p>Finally, we give the label a name. For example: &#8220;Tracking analytics SPA&#8221;, and clicking on the &#8220;Preview&#8221; button (top right in GTM), we will check inside the site if it works correctly from the <strong>GTM console<\/strong>. Here we will see that <strong>the tag is triggered with every &#8220;Page View&#8221; event due to the &#8220;All Pages&#8221; trigger and every time we click on a SPA link thanks to the &#8220;SPA tracker&#8221; trigger<\/strong> that we have created of the <strong>&#8220;Change in history&#8221;<\/strong> type:<\/p>\n<figure id=\"attachment_35298\" aria-describedby=\"caption-attachment-35298\" style=\"width: 585px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35298\" src=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/etiquetas-disparadas-gtm.png\" alt=\"Events triggered in the GTM console\" width=\"585\" height=\"284\" \/><figcaption id=\"caption-attachment-35298\" class=\"wp-caption-text\">In the GTM console we see that one &#8220;Page View&#8221; and two &#8220;History&#8221; events have been fired because we have entered the SPA and viewed two pages, so our tag has been executed three times.<\/figcaption><\/figure>\n<p>If we wanted to <strong>pass more information to Google Analytics, we would have to add additional variables on data created in the &#8220;Data Layer&#8221;<\/strong>, where the programmer can add the necessary information. <strong>Interesting information may already exist within the &#8220;Data Layer&#8221; if we examine the object gtm.newHistoryState<\/strong>, where with each change of the history the <strong>object passed by the programmer to the history.pushstate method to know the state of the application<\/strong> and the visited page <strong>is saved<\/strong>.<\/p>\n<p>Most of the time, in the gtm.newHistoryState we will only find an identifier of the visited page, but in others it may have interesting information.<\/p>\n<p>Once the configuration is finished and tested, <strong>we submit the changes and publish the new version<\/strong>.<\/p>\n<h2><span id=\"Tracking_a_SPA_by_adding_additional_JavaScript\">Tracking a SPA by adding additional JavaScript<\/span><\/h2>\n<p>Although <strong>GTM is a fantastic tool to make the installation of tracking scripts independent of the web code<\/strong>, sometimes it is better not to use it. For example, if we only plan to use Google Analytics, by directly installing the footprint of this application we are saving the load of a tag manager that is only going to be used to load a tag.<\/p>\n<p>In addition, <strong>the analytics expert would not need to configure the tag manager<\/strong>. If the website also uses a CMS, it probably has <strong>a plugin to easily install Google Analytics<\/strong> without the help of a developer, so <strong>sometimes not using GTM is much easier<\/strong>.<\/p>\n<p>Another problem is that to do some things, <strong>GTM requires basic programming knowledge<\/strong>, in addition to <strong>knowing how the tool itself works<\/strong>. Typically, <strong>those interested in learning about the tool are analytics experts who do not have programming skills<\/strong> and <strong>developers are usually not aware of the analytics experts&#8217; tools<\/strong>.The analytics expert asks the programmer to install the code, sending the programmer a link to the documentation and perhaps copying some of the code provided by a configuration tool.<\/p>\n<p>In the case where a <strong>plugin<\/strong> is used <strong>, if it is already prepared to track SPA pages, the problem will be solved<\/strong>. Otherwise,<strong> we should dispense with the plugin and ask a developer for help<\/strong>.<\/p>\n<p>Next, we will see how a Google Analytics developer should install Google Analytics to work in a SPA, so this part requires knowledge of JavaScript.<\/p>\n<h3><span id=\"Implementation_without_additional_libraries\">Implementation without additional libraries<\/span><\/h3>\n<p>Basically, what should be done, is that <strong>with each call to the <em>history.pushstate<\/em> method, the Google Analytics code that generates a new page view should be executed <\/strong>. According to <a href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/analyticsjs\/single-page-applications?hl=es-419\" target=\"_blank\" rel=\"noopener noreferrer\">the Google Analytics documentation for SPAs<\/a>, the following function would be correct:<br \/>\n<code><\/code><\/p>\n<pre>   function registrarVisitaAPaginaActual(){\r\n       if (typeof(ga)!==\"undefined\"){\r\n          ga('set', 'page', window.location.pathname);\r\n          ga('send', 'pageview');\r\n       }\r\n   }\r\n<\/pre>\n<p>Within the function<strong>&#8220;registerVisitAPaginaActual<\/strong>()&#8221; we check that the object &#8220;ga&#8221; that allows us to make the calls to Google Analytics has been loaded and, if it has been loaded, <strong>we tell it that the current page has been visited<\/strong>. <strong>We could have here the code to record the visit of any kind of tracking script<\/strong>.<\/p>\n<p>The difficult thing now is to get this function called every time <em>history.pushstate<\/em> is called. Currently <strong>there is no native event to detect when a <em>history.pushstate<\/em> call occurs<\/strong>. There is the event <strong><br \/>\n<em>onpopstate<\/em><br \/>\n<\/strong>event, which is also interesting to take into account, but it is not triggered by calls to <em>history.pushstate, <\/em> but <strong> only by changes in the history caused by the user or by programming<\/strong>, with calls to history.back(), history.forward() or history.go(-1).<\/p>\n<p>A possible solution would be to<strong> add the call to the function &#8220;registerVisitAPaginaActual()&#8221; in each place in our code where a <em>history.pushstate<\/em> appears<\/strong>. This can be tedious, <strong>time-consuming<\/strong> or even <strong>impossible<\/strong> if these calls are obfuscated in the core of a framework&#8217;s router.<\/p>\n<p>What is recommended in these cases to make the implementation cleaner and more viable, <strong>is to apply a hack that overwrites the native method <em>history.pushstate<\/em><\/strong>, as follows:<br \/>\n<code><\/code><\/p>\n<pre>\twindow.onpopstate = history.onpushstate = function(e) { \r\n           \/\/aqu\u00ed podr\u00edamos pasarle e.state a nuestra funci\u00f3n \r\n           \/\/si queremos registrar alg\u00fan dato m\u00e1s del estado actual, \r\n           \/\/como el tipo de p\u00e1gina\r\n           registrarVisitaAPaginaActual(); \r\n\t};\r\n\t(function(history){  \r\n            \/\/nos guardamos el m\u00e9todo nativo original\r\n            var pushState = history.pushState;  \r\n            \/\/sobreescribimos el m\u00e9todo nativo\r\n            history.pushState = function(state) {  \r\n                \/\/llamamos al m\u00e9todo nativo original que nos hab\u00edamos guardado\r\n                pushState.apply(history, arguments);\r\n                \/\/el evento inventado onpushstate se ejecuta \r\n                \/\/despu\u00e9s de llamar al  m\u00e9todo pushsate\r\n                if (typeof history.onpushstate == \"function\") {  \r\n                   history.onpushstate({state: state});  \r\n                }  \r\n            }  \r\n})(window.history);  \r\n<\/pre>\n<p>Obviously we have to load the Google Analytics library with the correct identifier beforehand, so that the code registers the visits.<\/p>\n<h3><span id=\"Implementation_with_Google8217s_autotrack_library\">Implementation with Google&#8217;s <em>autotrack<\/em> library<\/span><\/h3>\n<p>Another way to implement this is to <strong>use the Google library <\/strong><a href=\"https:\/\/github.com\/googleanalytics\/autotrack\" target=\"_blank\" rel=\"noopener noreferrer\"><br \/>\n<strong>autotrack<\/strong><br \/>\n<\/a>library, which implements the same <em>hack<\/em> with a bit more code, to include Google Analytics and track SPA visits.<\/p>\n<p>When including this library, we only need to use the following code with the correct Google Analytics identifier:<br \/>\n<code><\/code><\/p>\n<pre>  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;\r\n  ga('create', 'UA-XXXXX-Y', 'auto');\r\n  ga('require', 'urlChangeTracker');\r\n<\/pre>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>Due to <strong>the non-existence of the onpushstate event<\/strong>, the implementation of tracking codes in SPA&#8217;s becomes more complicated than necessary. <strong>The <a href=\"https:\/\/whatwg.org\" target=\"_blank\" rel=\"noopener noreferrer\">WhatWG<\/a> should include this method in its specification<\/strong> and browsers should implement it.<\/p>\n<p>In the meantime, <strong>all implementations of libraries and Google Tag Manager itself, are based on the hack explained in this post<\/strong>. This is not good because <strong>an update in some browser can make this hack obsolete at any time, although at the moment it has been working for many years and it does not seem that it will happen in the short term<\/strong>.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.<\/p>\n","protected":false},"author":14,"featured_media":47941,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[349],"tags":[416],"class_list":["post-52074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","tag-seo-tools","entry"],"yoast_head":"\n<title>How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level<\/title>\n<meta name=\"description\" content=\"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level\" \/>\n<meta property=\"og:description\" content=\"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\" \/>\n<meta property=\"og:site_name\" content=\"Human Level\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-16T07:12:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-30T10:47:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram\u00f3n Saquete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Daiatron\" \/>\n<meta name=\"twitter:site\" content=\"@humanlevel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram\u00f3n Saquete\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\"},\"author\":{\"name\":\"Ram\u00f3n Saquete\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\"},\"headline\":\"How to measure SPA web traffic with Google Tag Manager and Google Analytics\",\"datePublished\":\"2019-10-16T07:12:07+00:00\",\"dateModified\":\"2023-10-30T10:47:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\"},\"wordCount\":1719,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png\",\"keywords\":[\"SEO Tools\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\",\"url\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\",\"name\":\"How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level\",\"isPartOf\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png\",\"datePublished\":\"2019-10-16T07:12:07+00:00\",\"dateModified\":\"2023-10-30T10:47:10+00:00\",\"description\":\"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png\",\"width\":400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.humanlevel.com\/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to measure SPA web traffic with Google Tag Manager and Google Analytics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.humanlevel.com\/en#website\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"name\":\"Human Level\",\"description\":\"Web positioning and online marketing consultant Human Level\",\"publisher\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.humanlevel.com\/en?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.humanlevel.com\/en#organization\",\"name\":\"Human Level\",\"url\":\"https:\/\/www.humanlevel.com\/en\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"contentUrl\":\"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg\",\"width\":268,\"height\":51,\"caption\":\"Human Level\"},\"image\":{\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/humanlevel\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94\",\"name\":\"Ram\u00f3n Saquete\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g\",\"caption\":\"Ram\u00f3n Saquete\"},\"description\":\"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.\",\"sameAs\":[\"https:\/\/x.com\/Daiatron\"],\"url\":\"https:\/\/www.humanlevel.com\/en\/author\/ramon\"}]}<\/script>\n","yoast_head_json":{"title":"How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level","description":"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.","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:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","og_locale":"en_US","og_type":"article","og_title":"How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level","og_description":"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.","og_url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","og_site_name":"Human Level","article_published_time":"2019-10-16T07:12:07+00:00","article_modified_time":"2023-10-30T10:47:10+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png","type":"image\/png"}],"author":"Ram\u00f3n Saquete","twitter_card":"summary_large_image","twitter_creator":"@Daiatron","twitter_site":"@humanlevel","twitter_misc":{"Written by":"Ram\u00f3n Saquete","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#article","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics"},"author":{"name":"Ram\u00f3n Saquete","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94"},"headline":"How to measure SPA web traffic with Google Tag Manager and Google Analytics","datePublished":"2019-10-16T07:12:07+00:00","dateModified":"2023-10-30T10:47:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics"},"wordCount":1719,"commentCount":0,"publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png","keywords":["SEO Tools"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","url":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics","name":"How to measure SPA web traffic with Google Tag Manager and Google Analytics | Human Level","isPartOf":{"@id":"https:\/\/www.humanlevel.com\/en#website"},"primaryImageOfPage":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage"},"image":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage"},"thumbnailUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png","datePublished":"2019-10-16T07:12:07+00:00","dateModified":"2023-10-30T10:47:10+00:00","description":"On a SPA website tracking scripts such as Google Analytics do not work correctly with the default installation. Discover the solution with Google Tag Manager or with additional code.","breadcrumb":{"@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#primaryimage","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/como-medir-el-trafico-de-webs.png","width":400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.humanlevel.com\/en\/blog\/seo\/how-to-measure-spa-web-traffic-with-google-tag-manager-and-google-analytics#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.humanlevel.com\/en"},{"@type":"ListItem","position":2,"name":"How to measure SPA web traffic with Google Tag Manager and Google Analytics"}]},{"@type":"WebSite","@id":"https:\/\/www.humanlevel.com\/en#website","url":"https:\/\/www.humanlevel.com\/en","name":"Human Level","description":"Web positioning and online marketing consultant Human Level","publisher":{"@id":"https:\/\/www.humanlevel.com\/en#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.humanlevel.com\/en?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.humanlevel.com\/en#organization","name":"Human Level","url":"https:\/\/www.humanlevel.com\/en","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/","url":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","contentUrl":"https:\/\/www.humanlevel.com\/wp-content\/uploads\/logo-human-negro-1.jpg","width":268,"height":51,"caption":"Human Level"},"image":{"@id":"https:\/\/www.humanlevel.com\/en#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/humanlevel"]},{"@type":"Person","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/11ad888926867985985a0210476bae94","name":"Ram\u00f3n Saquete","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.humanlevel.com\/en#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a50f1a1974393853ee4f2423c9009f813cb107d3e7e20cf17cf8e86d407132e?s=96&d=simple_local_avatar&r=g","caption":"Ram\u00f3n Saquete"},"description":"Desarrollador web y consultor SEO t\u00e9cnico en Human Level. Graduado en Ingenier\u00eda Inform\u00e1tica e Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas. Tambi\u00e9n es T\u00e9cnico Superior en Desarrollo de Aplicaciones Inform\u00e1ticas y posteriormente obtuvo la Certificaci\u00f3n de Aptitud Pedag\u00f3gica. Experto en WPO e indexabilidad.","sameAs":["https:\/\/x.com\/Daiatron"],"url":"https:\/\/www.humanlevel.com\/en\/author\/ramon"}]}},"_links":{"self":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/comments?post=52074"}],"version-history":[{"count":4,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52074\/revisions"}],"predecessor-version":[{"id":55323,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/posts\/52074\/revisions\/55323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media\/47941"}],"wp:attachment":[{"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/media?parent=52074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/categories?post=52074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.humanlevel.com\/en\/wp-json\/wp\/v2\/tags?post=52074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}