Analytics Tracking of a dynamic page - javascript

I am using Google analytics and wish to differentiate between two different cases on the home page, specifically depending on the user being logged in or logged out (similar to facebook).
It was suggested to use a different URL for each page, but I am loathe to do at it involves modifying the website structure and involves needless redirects and complexity.
Is there a way to modify the Google analytics to track this (eg so paths through the site are tracked differently for each case)? I have read about tracking events but I don't think this is correct.

Write out a <meta> tag on the server side if the user is logged in, then check in the js for it and change what is being tracked in the _trackPageview() call?

this may make it look like another webpage but I use this as an onclick event so I don't see why it could be used here some how;
pageTracker._trackPageview('/unauthorised-homepage-viewer');
alternatively use the _setCustomVar method

You could alternatively use custom variables. You'll find the documentation in the Google Analytics help site.
Edit: See especially example 2 under the "Example Use Cases":
For example, if your website offer
users the ability to login, you can
use a custom variable scoped to the
session level for user login status.
In that way, you can segment visits by
those from logged in members versus
anonymous visitors.
pageTracker._setCustomVar(
1, // This custom var is set to slot #1
"User Type", // The name of the custom varaible
"Member", // Sets the value of "User Type" to "Member" or
"Visitor" depending on status
2 // Sets the scope to session-level );
pageTracker._trackPageview();

Google analytics allows you to see content by url, the default in overview, or by title.
You can change dynamically the title of the page.

Related

InlineManual Wordpress authentication

I am implementing a software called Inline Manual, I want to enable people tracking with the following documentation: https://support.inlinemanual.com/support/solutions/articles/80000983356-how-to-enable-people-tracking
The problem is that it needs the user variables and I can't find them so I can replace them there, the code is in an HTML block in elementor (photo)
https://share.getcloudapp.com/X6uQyWng.
Rhe code below the photo is the object that i need to enable people tracking, so i need the variables for track new users, so the only variables I need are: user account creation date, id, name, email, Im using the login directlly from wordpress, so al users are in default database.
I already tried to use some variables like USER.ID, referring to this page https://jetflow.io/automate/workflow-variables/variable-user/, however it didn't work

Google Analytics - Different users on same public computer have same User ID metric

I have an app where we track user id's from session and pass to custom metric in Google Analytics.
What we're seeing is that if you log out, and log back in as a different user, both users will use the latest user id within google analytics.
Is it possible to "clear" this common link between each session so that each sign in starts it's own session in GA?
Here's the same thread topic on ga forum: https://support.google.com/analytics/thread/96259041?hl=en
You have to set the clientId when you create the tracker. i.e.:
ga('create', 'UA-XXXX-Y', {
'clientId': '<my custom clientid>'
});
You will have to find a way to get it new on next time and pass it to the snippet above (or via GTM). For example, you can write it in a cookie that is deleted when you close the browser, in this way for the entire duration of the navigation it will be maintained and the next time you open the browser you have another one created and you will use that, and so on.

What is the safest and most effective approach when you need to pass data to another component through navigation in Angular8?

I´m currently developing an application based on user authentication where each user can register a student-campus as a teacher and currently, I'm on a feature where I have two routes:
Route 1: It has a Datagrid where I'm listing all of the student campuses that I've already created and each row has an edit button that navigates to "Route 2" and the purpose of that is to edit the already created student campus.
Route 2: It has a form with all the necessary fields to create a student-campus.
As you can see I need to pass the student-campus ID to fetch data in the ngOnInit to fill the fields and be able to edit the above-mentioned, so I have several options in consideration:
Option 1: Pass ID in the URL.
this.router.navigate(['planteles/registrar', idPlantel]);
https://myapplication/planteles/registrar/1
Option 2: Pass ID in the URL with queryParams.
this.router.navigate(['planteles/registrar'], { queryParams: { ID: idPlantel } });
https://myapplication/planteles/registrar?ID=1
Option 3: Pass ID in the state object of navigation extras.
this.router.navigate(['planteles/registrar'], { state: { id: idPlantel } });
Option 4: Shared service and BehaviorSubject to subscribe to data.
I owe you the code
I'm able to use any of these but I have a problem with each one of them.
I can't use Option 1 and Option 2 because the ID cannot be changed by the teacher because that gives him the possibility to fetch the student-campus data of another teacher and edit it, so it isn't safe.
The problem with option 3 and option 4 is when I refresh the page the state is lost.
Currently, I have a workaround with option 3 which is to redirect the user to the previous page if the state is undefined but I don't like that solution. I'd like to persist data if the user reloads the page without using LocalStorage.
Thanks in advance, all help or contribution is well appreciated.
Option 1 is the correct option here (and the way you will find most sites in the real world are implemented... including this one we're on now). The problem is your approach to web security, and what you need to fix is your backend. You're approaching web security as though front end security is real, it's not. Web security exists on your backend. Users should not be able to fetch or view or manipulate data that does not belong to them, and this must be enforced by your backend.
A high level example of how this might work: some secure authentication token should be granted when the user logs in, then this authentication token should be attached to each request. The API then uses this token to check which user is making the request and ensures they have the proper permissions. If they do not (as in the case of the user editing their URL param to some ID they do not have permissions for) or if there is no token, the API should return a 401 or 403 response and the front end should handle it appropriately (ie sending them back to list, or showing an error page, whatever you decide)... how to issue this token, make it secure, and make use of it is an entirely separate topic beyond the scope of this answer.
In any of the options, I could open my dev tools, and view any API requests being made, and change the ID's and use that to view or manipulate other people's data without any effort at all. So options 3 / 4 are barely more "safe" than 1 or 2. As none of these are safe without properly implemented backend security.
Front end "security" exists only as user experience. Me and you are both using the same URL to view this page, but we see different options and buttons, like you can edit or delete your post and accept answers, while I can't, but I can edit or delete my answer etc. This isn't for true security purposes, SO's servers enforce who can and can't take what actions. It's just showing me and you the UI that reflects our different permissions, ie, its all just UX.
There's another way too, which is defined in Angular docs itself.
NavigationExtras
Example:
let navigationExtras: NavigationExtras = {
queryParams: {
"firstname": "Nic",
"lastname": "Raboy"
}
};
this.router.navigate(["page2"], navigationExtras);

Google Analytics on React JS site outputting incorrect data (broken sessions?)

We have a site with most of the content managed by Wordpress, however when the user navigates to search pages (user searches for a product), it's handled by React JS.
It's all on the same domain, so the user never knows that they are interfacing with two different applications.
Google Analytics on the site, however, doesn't seem to perceive sessions correctly. It's logging entrances (landing pages) to the site as search pages with rather long URLs:
There are thousands of landing pages like this, and the site is new, so there's no way this is all traffic is coming in from external links
Referrer path for all of these sessions is "(not set)"
Internal IP addresses are filtered
The traffic is coming from various sources/mediums, suggesting that sessions are somehow breaking (screenshot below)
Currently, GA is set up with GTM. I tried using this to fire the GTM tag in React.
Also attempted making the GA tag within GTM fire on browser history changes rather than page views (history changes fire when in React, normal page views in Wordpress). But the issue still persists with these modifications.
Note that these sessions are not specific to any one browser:
The issue you're experiencing comes from the fact upon search, you are switching your entry point and doing a hard refresh of your page to the React app. Even though the domain doesn't seem to change, it's still considered by the browser as a fresh page load and thus showing like so in your analytics, as shown by this request:
You haven't really told if you were using react-router in your app (I'm assuming you are given the different paths), a way to get around the problem would be to use react-ga instead of the default GA script and leverage the onUpdate callback of react-router.
First import and initialize the module with your GA id:
import ReactGA from 'react-ga'
ReactGA.initialize('UA-000000-01')
Then in your routes configuration, add the onUpdate property on the <Router> and create a method that will call the google analytics with only the pathname so you won't end up with all the query parameters that are quite obnoxious in the dashboard.
const onUpdate = () => {
ReactGA.set({ page: window.location.pathname })
ReactGA.pageview(window.location.pathname)
}
<Router onUpdate={onUpdate}>
...
</Router>
Still, if you want to keep track of the user search, I would recommend using events instead, and doing something like the following upon search:
ReactGA.event({
category: 'User',
action: 'Search',
value: 'your formatted search value'
})
It will also give you the ability to format the value of the search any way you want, which would be more readable for you than query parameters.

Set Google Analytics User ID after creating the tracker

The Google Analytics User ID documentation page shows that you set the User ID when you create the tracker. I have a javascript only project with sign-in after page load, is there any way to set the User ID after login? Something like ga("set", "userid", "UNIQUEID")
On the field reference page it says you can only set user-id in the create function. Are we able to call create again with the user-id? Will that create a new tracker, or override the old one?
EDIT: The beta version of User ID tracking showed that you could specify the userid after creating the tracker using ga('set', '&uid', {{ USER_ID }}); and that would try to unify the session from before the userid was set with the one after. That seems to be very different than what the docs current specify. Is there any way to do this with the current method?
This one works
ga('set', '&uid', '<dynamic user id here>');
The documentation seems to indicate that, with analytics.js, you should do the following:
// Alternatively, you may set the user ID via the `set` method.
ga('set', 'userId', 'as8eknlll');
I'm not sure how this differs from the current answer (which uses &uid), but this solution is working for us.
You should set userId beofre sending event to Google Analytics. I couldn't manage to send userId after sending events pageview and ecommerce:send.
It appears from Justin Cutroni's blog that he's saying that data stitching (in your case matching the userid prior to login to the userid post-login) is not currently offered in Google Analytics.
http://cutroni.com/blog/2014/04/10/understanding-cross-device-measurement-and-the-user-id/
See specifically this sentence: "Google Analytics will not go back in time and stitch every single session from a given user together."
If you are using Google Tag Manager you can set the User ID by added '&uid' as a field to your Google Analytics Setting variable:

Categories