Google Analytics not tracking pages - reactjs

So i'm using GA to track the pages my users visit. Unfortunately, it's only giving me the main page back. I definitely have more than one page on my website.
I think it's because i'm using React (and only have 1 index.html file) but i'm not sure how to fix this. Thanks!

What you can do is attach google analytics to DIV's and other things. What i suggest is to attach GA to other parts of your apps for better tracking
Please see this S.O. question for attaching to a div: To track clicks on a div using google analytics

If you have a GTM installed on your website it's possible to use a History change tag that has been created for such cases.
It fires every time an URL changes, even if a page doesn't reload completely. So that every time a user visits a new page (with new URL), this tag will send a pageview to GA.

if your site is single page application then you will run into this case. You will have to detect the page change by some callbacks and then trigger page view manually. Uladislau Khatskevich thought is correct history change event can be used for it, if GTM is used. History change event will help you in detecting when the page is changed. If GTM is not used then you have to provide a callback when page change

Related

How do I find out where a Visualforce page is being used in my Salesforce org?

I am fixing soql injection errors in my Salesforce org. How do I find out where that page is being called from in Salesforce? I tried looking at the 'Where is this used?" button under setup/Visualforce page/edit/ and it just shows me the test that it is being called from. I checked the show dependencies and it shows me the controller that it is associated with. I can't seem to figure how I can access the page in Salesforce so I can do a manual test on it.
Create a sandbox and try to delete it in there. If page is "properly" used - dependency should block the delete. Can be custom VF tab, button, link, embed on page layout as iframe... Can even be in community or Site as a login page for example.
If you have the project in git or sfdx you could try searching for page's API name.
But pages can be also accessed freestyle, in classic UI you used to just /apex/vfpagename in the address bar. In lightning it's bit more complex but doable for a determined user.
If you want to block access while you fix it - remove right to use the page from profiles / permission sets.
https://salesforce.stackexchange.com/a/12672/799
https://lightning-configuration.salesforce.com used to give some info about VF pages usage (count of hits I think) and there's whole Event Monitoring module paid extra (standalone or as part of Salesforce Shield) too

Is is possible to trigger 'Container Loaded' twice or force GTM to reload ? (React)

I am actually working on a large web application, which was initially built with Symfony/Twig, and that is gradually refactored using React. But since I am using React, some of my pages get no "views" in Google Tag Manager (GTM).
I followed this guide to use GTM in React. But I have a lot (tens) of Tags and Triggers in GTM, based on the 3 native events "Container loaded" (gtm.js), "DOM Ready" (gtm.dom) and "Window Loaded" (gtm.load).
The first solution (from the guide) is to add a new custom trigger (based on History Source) and link our tags on this new trigger. But since I have too many tags, this is not a satisfying solution.
The second solution is to manually trigger events, using the datalayer. This works fine, I can easily trigger the "DOM Ready" and "Window Loaded" events. But it does not work as expected for "Container Loaded". I guess that GTM does not handle this event more than once per page load.
So, here are my questions:
Is it possible to "fake a reload" in GTM (so that GTM act like if I opened a new page)?
Or is it possible to trigger "Container Loaded" (gtm.js) multiple times?
Screenshot of a "normal" Container Loaded trigger:
Screenshot of a manually called Container Loaded trigger (from React):
No. You can call gtm.dom or gtm.load more than once but not gtm.js.
You can empty the dataLayer if you switch from page to page in your SPA. Which should simulate something like a fake reload. Also, it's best practice to use VirtualPageViews to track your website.

GTM History Change Listener Missing Pageviews in GA

I'm using the history fragment to capture the url after the hash for an angular-based site we've built.
Not all my pages are showing up under All Pages in Google Analytics - but DO show when i add page as a secondary dimension to events.
I think this is to do with using the history change trigger to send url fragment as a pageview, but I can't figure out how to make it work.
How do I make sure an exit page is captured, even though it isn't reloaded hence no new history fragment?
(register.creditunions.com = tracks fine, but when someone completes, it goes to /confirm, which they leave, and which is not tracking. I have the confirmed sign ups in my CMS, and they HAVE to go through to that page to get signed up, hence i know i'm not just asking about a page that isn't being seen.)
Google Analytics doesn't detect URL fragments as a part of page path out of the box. You need some tweaks to force tracking of anything after the hash. There is a lot of recipes all over the web. Try this one https://www.simoahava.com/gtm-tips/track-url-fragments-as-pageviews/

Linkedin tracking for single page app in Google Tag Manager

I'm trying to implement LinkedIn's insight tracking tag in Google Tag Manager on a single page React web application. Since there are no 'real' page reloads, the tag is only fired once. I have a dataLayer event that triggers on rerouting in the app, so I tried setting the tracking tag to fire on that event. The tag itself now fires multiple times but it does not track the new location.
What can I do to solve this?
LinkedIn
It is not an official solution but you can add a custom HTML tag including this:
<script>
lintrk("track");
</script>
It will be triggered by History Change event.
You can fire Virtual pageviews on that particular dataLayer events.
What is a Virtual Pageview
Virtual Pageviewsrefers to sending the pageview hits to Google Analytics, without reloading the page. For the single page page app, virtual pageviews are good to track the sections.
Steps
Determine a standard notation for virtual pageview like /vpv/section name
On the Datalayer event, push the value of section name to the website section or something that can let you know which section the user is on.
For reporting, you can now actually see how many views happened for that particular section/page etc
The GTM tag will be normal pageview tag, you just need to put the virtual page path value in the More settings > Basic Configuration like shown below:
As pointed out in the article What Is Google Tag Manager? Do I Need It For My Website?, Google Tag Manager can listen to browser history changes, i.e. History Change is one of the pre-defined trigger in Tag Manager. So it's doable.

Issues w/ Silverlight Navigation Page + window.location.hash

I have silverlight navigation pages (with NavigationCacheMode="Required").
When i normally navigate to these pages (via mouse clicks) the pages get loaded as expected (they are only created once due to the cache attribute).
However, I have a need to update the url in the browser address bar.
When I update this via javascript ("window.location.hash=#...") the address and page gets displayed, BUT the page gets re-created - which is causing other issues.
In particular the issue that this is causing is that the page has a Prism.regions defined in the xaml. So it throws an error complaining about a region that has already been registered.
Has anyone tried something similar to this?
I dont think there is a way to update the url in the address bar without the browser navigating to it. Note that the url that im trying to update to includes query string paramters, which is not directly "known" by the silverlight navigation framework.
The last resort that i havent tried is to register all the unique Urls with the navigation framework.
I found an hack. simply cancel the frame_navigating event when ever the url is being updated manually. works great.

Resources