I'd like to know if there's some configuration I might've missed when setting up Firebase Analytics for a Vue app (and for SPAs in general, I suppose) to get it to track page changes, because when I'm in Firebase's DebugView, it doesn't track page_views unless I refresh the page or manually enter a URL into the browser. I know for the regular Google Analytics module (vue-analytics) you have to pass it the router object on initialisation for it to work (more about that) so it makes sense to me that you'd have to do something similar with Firebase Analytics, but I can't find anything in the docs about it.
I've tried manually calling logEvent('page_view') from my router.afterEach() guard, but then it logs each page change multiple times.
Please let me know if there's any info or demo code you'd like me to include.
So this doesn't fix the problem, per se, but it's what I'm going with until a better answer comes along.
Moving the logEvent('page_view') from the router.afterEach() guard to the router.beforeEach() guard prevents it from being logged multiple times in Firebase Analytics, and adding a custom type parameter allows me to distinguish between an actual page change/load and an internal "SPA" page change/load. So (the relevant part of) my router code now looks like this:
router.beforeEach(async (to, from, next) => {
firebase.analytics().logEvent('page_view', { type: 'internal' });
});
Related
I've successfully installed Google Tag Manager on my website. I've started firing some events from Google Tag Manager and can see them come up when using the tag assistant debugger. I've set up tags which send events to Google Analytics and can see that data pipeline working well.
What I'd like to do is have an easy way to configure all my tags of type GA4 Event to not fire when the trigger happens in a non-production environment. I'd like my triggers to work in non-production environments (so that I can debug my triggers), I just don't want the events to be piped to Google Analytics in non-production environments. Is there an easy way to set that up in Google Tag Manager?
I've noticed that when running the tag assistant debugger there's a field called debug_mode which is set to true. I tried setting that in my local environment like so:
export function maybeSetDebugMode() {
if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
window?.dataLayer?.push({"debug_mode": "true"})
}
}
but it seems that even with this code, my custom events continue to get piped to GA:
Broadly speaking, is there a way to configure Tag Manager to not pipe events to GA when a certain condition is met (like a URL match or some other event field having a specific value)? Alternatively, can Google Analytics be configured to ignore events during ingestion which meet some criteria?
Yes, there are pretty elegant solutions for not sending events to your prod GA from lowers or from previewing/debugging. And yes, there is a way to prevent GA from accepting those events.
I'll start from the former since it's much more proper.
Typically, to start sending events to GA4 from GTM, you have to have at least one GA4 configuration tag that asks you for the measurement id. Well, no one forces you to just give it the measurement id. Give it a CJS instead:
And then just reference it in your config tag like so:
Generally, this should do what you want. Whenever you're in your lower env, or when hostname is localhost, well or 127.0.0.1, or when you're previewing the container on prod, or whatever else you feel proper there, you will see your tags and triggers firing, but your associated events will be flowing into a different GA4 property.
About that different GA4 property. It is a good practice to still collect your lower env events rather than sending them to a non-existent property. There will be time when you want to see some testing data. Just don't keep it in one property with your prod data, but you know that.
Ok, now let's move to the second option. GA4, of course, has data filters. The filters are premature comparing to the old filtering system in GA UA like most of the GA4 features, however, they somewhat fit your needs. In particular, the developer traffic filter. You'd have to add a custom parameter to every developer event that you would like to be visible in debug view, but not present in the reports.
Given how raw and buggy GA4 is and how the number of filters in there is now severely limited, I would advise to solve it in GTM and keep the filters for things that couldn't be solved through GTM. Things like analytics spam, if you ever get it.
GTM has built-in vars that you can reference. But most of them are disabled by default. Here:
and then when you type {{ and start typing the var name in your CJS, you will see this:
just click the option that you need and it'll autofill for you.
and you're supposed to treat it as whatever that referenced variable returns. It's mostly strings. but you can definitely return a funciton and run it like {{cjs that returns a function}}(param1, param2). Anyhow, we're doing strings, so, here:
should be pretty comfy to use. The only awkward thing with referencing the built-in vars is that it's hard to debug them in the console, so I often just take my hostname from globals, like window.location.hostname.
I've got myself a bit of a head scratcher here, for me anyway, as I'm a bit new to all this.
I have WP a site that has its GA snippet inserted with Google Site Kit.
There is a plugin that, when a user registers, sets the users ID to a custom dimension.
The code to execute this 'set' has been added to the WP footer with the add_action('wp_footer') command.
The code looks like this:
<script type=\"text/javascript\" id=\"set-google-id-dimension\">
document.addEventListener(\"readystatechange\", event => {
if (event.target.readyState === \"complete\") {
try{
gtag('event', 'registration', {'dimension1': '".$client."'});
}catch(e){
try{
ga(function() {
// Logs an array of all tracker objects
var trackers = ga.getAll();
var firstTracker = trackers[0];
console.log('tracker: '+firstTracker.get('name'));
ga(firstTracker.get('name')+\".set\",\"dimension1\" ,\"".$client."\");
});
}catch(e){
console.log('GA and GTAG not defined');
}
}
}
});
</script>
For ease of reading, I've stripped out the PHP, but this is being echoed out in the footer.
Why the GTAG and GA command? Both analytics are being output in the console, though the site owner does not know why as "they only use Google Site Kit".
Now, this code works on the dev site that I control (and I've set it up to mimic the live site as best as possible):
However, when on the "live" site, the dimension is never set, even though I can see the 'set' command being executed (ignore the timestamps in the console, I forgot to screenshot before navigating away from the site and had to go back and reload the page):
The live site does not use the default tracker, hence the ga.getAll() call to access the tracker information.
From what I can see, everything should work fine.
I understand that from reviewing this question
Google Analytics Custom Dimension Not Being Set
that the 'set' needs to come before the 'send'.
I'm not sure how to accomplish this though since the plugin does not send the pageview to GA, from what I understand, that's Google Site Kit. I have contemplated adding a 2nd pageview send when this plugins code is loaded (it is only executed immediately after a registration and never again), but that would skew the page hits.
This site has had a myriad of "admins" over the years, so I wouldn't be surprised if there was something buried in one of the plugins causing a conflict somewhere. At one point I thought it was a timing issue, so I had the function load every 50 milliseconds checking for 'ga' to be defined, then execute the 'set' command (with a limit to 35 iterations), but the issue was the same (could set the command execute in the console, but the dimension did not reflect the value).
Any advice I can get to debug and get to the root cause would be of great assistance to me. Please ask any questions you need and I will respond as quickly as possible.
It seems a bit complex as a situation so understanding how it works and why there is gtag and ga at the same time is not easy to understand.
In any case, assuming that everything is working, what you can do is not to send a second pageview but send a dedicated event (by setting non-interaction to true) in this way you do not alter any information in Google Analytics and you can pass to the platform the data you are interested in (dimension1).
I am trying to confirm a 'pageview' is being processed properly.
( using google real time dashboard ).
The issue is simple, If I use this call:
// page uri is: www.example.com/signup
ga( 'send', 'pageview' );
I see a matching entry at google's dashboard.
Attempting to override the title / page parameters ( according to the docs ) like so:
ga( 'send', 'pageview', {
'page': '/admin/logout',
'title': "test"
} );
Simply produces nothing over at google's side.
Any idea what is going on?
EDIT
It appears that google analytics service is filtering pages that contain
the word "admin".
Removing that from the 'page' helped in my case.
I don't know what's going on because your syntax is definitely correct.
FWIW, while the real time dashboard is a great way to see your hits come in, it should not be considered proof or evidence that something is or isn't working. Everything you send to Google Analytics goes through processing after it comes in, and (for a variety of reasons) a hit may be dropped from reports after showing up successfully in the real time view.
There's also always the possibility that there's a bug in the real time dashboard, and a particular hit may not show up even though it will ultimately make it into your Google Analytics reports.
A much more reliable way to see if your code is working is to take a look at the data that is actually being sent from your page. You can do this via the network inspector (in Chrome) or by using the debug version of analytics.js, which logs status and error message to the console.
I wanted to get a definitive answer on here for later reference now that we have a stable Ember RC. A combination of the top 2 search results for emberjs google analytics reveals that this is a good way to do track route changes:
App.ApplicationController = Ember.Controller.extend
routeChanged: ( ->
return unless window._gaq
Em.run.next ->
page = if window.location.hash.length > 0 then window.location.hash.substring(1) else window.location.pathname
_gaq.push(['_trackPage', page])
).observes('currentPath')
but then I also see results for using Event Tracking for single page web applications.
I haven't tested the code above yet, it takes a few hours to propagate changes to the GA dashboard. Update: This doesn't show up under the Content category on my Google Analytics dashboard. Neither under "Pages" or "Events".
If anyone has advice or if there's something I'm missing somewhere let me know. I can also PR a guide for the website based on the answers here.
Alex DiLiberto gave a really nice talk about a robust & scalable way of adding Google Analytics to an ember app in his EmberConf 2014 talk here.
- Slides
- GitHub
App.ApplicationRoute = Ember.Route.extend({
actions: {
didTransition: function() {
Ember.run.once(this, function() {
ga('send', 'pageview', this.router.get('url'));
});
}
}
});
The talk was aiming to be independent of which analytics library was used.
There is also now an official Ember Cookbook on implementing Google Analytics here.
I would use _trackPageview for things that have routable URLs and _trackEvent for things that don't.
In the Event Tracking link when they refer to "Embedded AJAX page elements". They're not meaning SPA's, but rather those cases when the URL stays the same, but some event that you wish to track happens within the page (in the case via AJAX).
There may be other cases where it makes sense to use _trackEvent, but for route transitions I'd use _trackPageview.
Using routeChanged() is not a good way to track dynamic segments such as /category/food /category/something since it's going to be fired only once. I wrote an article about this here: http://www.randomshouting.com/2013/05/04/Ember-and-Google-Analytics.html. I also consulted with the guys behind Ember and confirmed that this is indeed the proper way to track url changes for Google Analytics.
Most of these answers are outdated. You should be using a mixin and adding it to your Router to listen for the didTransition event and fire your pageview there. That way it's handled for all routes. There are several addons out there, including one I wrote called ember tracker which gives you pageviews and event tracking out-of-the-box.
You can see how I did it here. It's fairly straight forward.
i know it can track flash events from other flash banners/sites on other networks..
but can it from Adwords?
i found this code:
on (release) {
// Track with no action
getURL("javascript:pageTracker._trackPageview('/folder/file.html');");
}
but it seems to require a JS script on the page.
how does Adwords handle this?
thanks
-art
It should be fairly easy to try this and upload a banner to AdWords, but the following seems to imply that this is not allowed
http://adwords.google.com/support/aw/bin/static.py?hl=en&page=guide.cs&guide=28427&topic=28431
"Extra calls: Your ad code cannot make external server calls for additional JavaScript or other functionality. All functionality must be localized to the code itself. "
Also if you want to use Google Analytics within Flash, refer to the following documentation :
http://code.google.com/apis/analytics/docs/tracking/flashTrackingIntro.html
(in your case it sounds like Bridge mode is what you are looking for).