My current analytics setup looks like this:
this.context.router.listen(location => {
analytics.page(location.pathname, {
title: document.title,
url: `${config.HOST_URL}${this.context.router.createHref(location)}`,
path: this.context.router.createHref(location),
referrer: document.referrer,
state: location.state,
});
});
The amount of data in the location object is pretty minimal. The question is, how do I get information about an item that is loaded in a componentDidMount block into the page tracking?
In this particular instance, I am trying to add information about an artwork that a user is looking at into Google analytics as a custom dimension. The link below shows how it would normally be added.
https://support.google.com/analytics/answer/2709828?hl=en#example-hit
I'm using react-router v2
From the information given, I'd say your best bet is on the pages you want to add more data put a condition in the listener to NOT log if loading that page. Then in the componentDidMount where you have the data call the analytics for the page.
Basically just override it for those pages that need more data.
Related
For a project I am making I will be using a route that looks something like this: collection/id. The server returns an 404 error when the given ID does not exist.
When this happens I would like to push the 404 error page that I have in my router.
{
name: 'notfound',
path: '/:pathMatch(.*)*',
component: () => import('../views/PageNotFoundView.vue'),
}
Now this is achieved by calling the following code: this.$router.push('/notfound');. However, this also changes the URL in the browser which is not something I would want. When reloading the page you should be going to collection/id.
Is there any way to push a navigation route (or component?) without changing the URL displayed?
Example: https://google.com/ajdfkasf doesn't go to https://google.com/404 but rather you keep the link and can refresh it. I could include the component in the view instead of trying to solve this with routes, but that would add overhead to all kinds of views.
I set up Google Global Site Tag for an Angular SPA. I'd like to override the page referrer that is passed to Google.
Use case: after logging in (using oAuth2), the user is redirected to the app. At this point, the url contains sensitive auth data (auth code). This url then gets logged to Google Analytics, which of course should be avoided.
I use the Angulartics2 lib with the GST provider, which internally uses the following code to send page track events to Google (according to Google's documentation on SPA route tracking):
gtag('config', trackingId, params);
By including the following line, I'm able to override the referrer (dr) in the query parameters:
params.page_referrer = 'https://my-custom-referrer.com';
index.html:
<script async src="https://www.googletagmanager.com/gtag/js"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
</script>
Code for tracking the page view event:
gtag('config', 'G-XXXXXXXXXX', {
page_location: 'http://localhost:4200',
page_path: '',
page_referrer: 'https://my-custom-referrer.com',
});
This leads to the following request being sent to google (note the dr properties, which hold the referrer):
As you can see:
The query string uses the correct referrer
However, the request payload still contains the original referrer containing sensitive data
I've tried setting the page referrer with the following line of code:
gtag('set', { page_referrer: 'https://my-custom-referrer.com' });
but this results in the same behaviour.
How can I make sure the request body also uses the overridden referrer? There used to be a setting within the Analytics dashboard to exclude certain referrers, but in the new version (Google Analytics for properties) it has disappeared.
Have you checked out the referral exclusion list?
Generally, if it redirects off your domain for authentication, you don't really want to count it as a referral, because then it will replace the true acquisition data for your users. You want to exclude it so the session is kept intact.
Also, you stated that you're using google tag manager (GTM), but your code and links to the documentation are for gtag.js, which is NOT GTM.
To set the referrer field in GTM, you need to locate the GA tag OR GA Settings tag and under the "fields to set" area, set the referrer field to your liking. Like so:
Though careful that if you override this for everything there could be issues with data accuracy, so you want to conditionally override this based on where it is coming from.
Not a solution, but a workaround. It pushes the current page (without paths or query parameters) to the history, which is then used by Google as the page referrer. At least it allows you to keep sensitive information out of Google Analytics.
history.pushState({ page: 1 }, '', window.location.origin);
I want to split test different layouts on my site, and to track this I want to use a Custom Dimension which is named Split and equal to 1 or 2.
I've configured the Custom Dimension in Google Analytics and added the code like this:
// Google Analytics
gtag('config', 'UA-70465331-1'), {
'custom_map': {'dimension3': 'Split'}
});
// Sends the custom dimension to Google Analytics.
gtag('event', 'SplitTest', {'Split': "2"});
However, when using the Google Tag Assistant, the Custom Dimension isn't appearing under Events.
The live page is: https://www.travelden.co.uk/mindblowing-new-hotels-in-the-maldives
Can anyone see where the error is?
Much appreciated!
It is coming through:
You need to be careful to set the event to "non-interaction",
I would also suggest you to not send an event if you don't need it...so something like this:
gtag('config', ''UA-70465331-1', { 'dimension3': '2' });
Doing it this way the dimension is applied when the page is loaded, which is really what you're testing, the layout.
I want to build a Blog, of sorts, with Meteor but, rather than just have a Blog such as platypus.meteor.com, I want to create a separate Meteor template for each Blog "post" and then send a link to select people such as "platypus.meteor.com/thispost"
In this way, the person would only see the post I intend them to see; to see others, they would have to guess at other values, such as "/thatpost", "/theotherpost" etc.
And in my case, if they stumbled across them, no big deal.
This is my plan:
Create one template at a time:
<template name="thispost">
. . .
</template>
...and then allow access to that to whomever I apprise of its availability (that is, they simply enter the link I send them into their browser).
I don't know what sort of routing I need to set up; I'm open to either IronRouter or FlowRouter. At any rate, I want an URL like "platypus.meteor.com/thispost" (after a "meteor deploy platypus" of this project) to show the user the contents of that Template and nothing else.
So my question is: what do I have to do, routing-wise, to accomplish this?
How about simply:
Router.route("/:templateName/:postId",{
template: this.params.templateName,
data: function(){ return Posts.findOne({ _id: this.params.postId })
});
Then you can generically share any post with any template and have the template name appear right in the route.
I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});