{"id":1529,"date":"2016-02-19T11:39:50","date_gmt":"2016-02-19T06:09:50","guid":{"rendered":"http:\/\/blog.amicicorp.net\/?p=1529"},"modified":"2022-03-31T15:34:43","modified_gmt":"2022-03-31T10:04:43","slug":"track-pageviews-single-page-application","status":"publish","type":"post","link":"https:\/\/www.amicicorp.net\/blogs\/track-pageviews-single-page-application\/","title":{"rendered":"How to Track Pageviews in Single Page Application?"},"content":{"rendered":"

A Single Page Application is a web-based application that tries to fit on a single page to provide a desktop-like application to its users. Single page apps have the unique characteristics to redraw any component of the UI without requiring a server to round trip to recover HTML.<\/span><\/p>\n

Examples:<\/strong><\/p>\n

    \n
  1. Ecommerce pages loading content dynamically<\/li>\n
  2. Faster blog reading experience<\/li>\n
  3. New website, updating content in background<\/li>\n<\/ol>\n

    Single-page apps are very fast and responsive compared to traditional webpages. It also saves web resources.<\/p>\n

    Tracking page view helps to get the data regarding the number of views a particular page has got during a predefined period. Single Page Apps (SPA)<\/strong> are great to use for different reasons, but they require a bit more expertise to set up tracking page views than required for a traditional page.<\/span><\/p>\n

     <\/p>\n

    For the traditional sites, the javascript tracking snippet is perfectly applicable, but for a single page application where the new page content loads dynamically not full page loads like traditional websites, the \u201canalytics.js\u201d snippet only runs once. This implies that the virtual pageviews need to be tracked manually when the new content loads.<\/span><\/p>\n

    Here are two processes of tracking page view for Single Page Applications:<\/strong><\/p>\n

    Tracking dynamically loaded content as distinct page views, a page view hit can be sent to Google Analytics by specifying the document path and setting the \u201cpage\u201d field. It symbolizes only the portion of the path in a URL and needs to start with a slash. Normally, the page value and the path portion of the given URL are found to be same, but this is not mandatory. It is found that websites that load content dynamically normally updates the hash portion of the URL and in this context several different URL paths may point to the same resource.
    \n<\/span>
    \n<\/span>Setting Page Data for Multiple Hits:<\/strong><\/p>\n

    It is obvious that specifying a page value in a page view sends the page value to the Google analytics for that page only. It doesn\u2019t automatically update the stored page value on the tracker. This is problematic in some situations particularly when other \u201chits\u201d are sent and don\u2019t clearly contain the current page value. In this situation, Google analytics associates those hits with only those URLs present at the time of preliminary webpage load. This issue can be easily avoided by periodically updating the tracker object with all new information before sending the hits. <\/span><\/p>\n

    Two things to be noted while tracking page view for Single Page Application:<\/span><\/p>\n