De-bugging Google Analytics Link & Download Tracking - javascript

I'm trying to install some script on one of my websites to track outbound links and downloads in Google Analytics but I'm not having much luck. This is the script that I'm using (if anyone knows of a better guide or script I'd love to hear about it).
My question is this: How can I check whether it's working without using Google Analytics? Is there a way I can see the events or data that's being sent when a link or download is clicked using Firebug or Developer Tools?
Thanks in advance,
Tom

You might use the GA autotrack plugins instead (https://github.com/googleanalytics/autotrack) - while not an "offical" part of the product those are written by a Google engineer (who also maintains some presence at stackoverflow).
However it is easy to see if this works - Google offers the Google Tag Assistant (for Chrome) to test GA integrations, there is a Chrome GA Debugger Extension, or you might simply open the developer tools in your browser and inspect the "network" tab. If you filter for calls to google-analytics.com/collect you should see outgoing calls and can look at the query parameters to see if your data is sent properly; if the calls return a http status of 200 the data should turn up in your GA account.

Thanks to Eike's response I've now chosen to solve this challenge by installing Google Tag Manager and then creating custom tags to track things like outbound links, email links and download links. Here's a guide that helped me to setup download tracking, hope others find it useful.

Related

Is there a way to send my Chrome Extension to testers before it being approved?

I'm building a chrome extension, and have sent it for approval trough the Google Web Store Developer Dashboard. When I completed the process, I was informed that it may take several weeks for my extension to be reviwed for publishing. I chose to publish it only for testing. Is there a way for me to have some friends download it and test it before the reviewing process is complete? Thank you.
I realized later that after sending the extension for review, I can see a link for the extension in the store. This link is not publicly available, and can only be acessed by myself and accounts that I add as trusted testers on my "Account" page. After adding the e-mails for my friends, I can send them the link, and they will be able to download the extension from there. (The authorization for the testers has a small delay, but usually after 5 minutes they are able to see the extension page). This was exactly what I needed, and I think is simpler then sending the code to my friends.
If you don't mind sharing the code with your friends, you can simply send them the folder of your extension. Then your friends can go to chrome://extensions/ turn on the developer mode and load the extension the same way you do when developing.

Using Google Tag Manager with Google Analytics to track a Chrome Extension (2020)

I am working on a chrome extension, and I would like to be able to track metrics with google analytics. I believe the easiest way to do that would be through tag manager, and I have found this tutorial that explains how to implement google tag manager in a chrome extension. However, just following this tutorial isn't working for me, and I have a few questions.
Is it possible to track a chrome extension using Google Analytics? If so, I have only seen tutorials using Universal Analytics, but is it possible using Google Analytics 4? It is recommended to start out with GA4 now, and I would like to do that if possible.
How would I set up a data stream? A web data stream requires a valid URL, which doesn't really apply to an extension. I have a separate website that I am working on and I can include that URL, but my goal is to track the extension, not the website.
When debugging in GTM, it now requires you to add a URL on which to debug. My extension runs on amazon.com but when I enter amazon.com as the URL I get a 404, probably because the tracking code doesn’t actually apply to amazon, but to the iframe that is injected when I am on amazon. What would I do here?
I have it set up so that the GTM code is in a separate js file that is injected into the iframe html code at the end of the head tag. I have modified the CSP in the manifest to allow requests to google analytics and google tag manager. And when building the tag in GTM, I set the fields checkProtocolTask to false, page to a custom url, and path to {{Page Path}} as the above tutorial and this SO question have suggested. For now I have my GA account set up with GA4, and I'm using a web data stream. I have the GTM tag as a GA4 configuration and I have made sure I included the correct measurement ID. I'm having a hard time finding any information about using GTM/GA in a chrome extension, and so any answers or suggestions would be greatly appreciated.
Okay, for anyone still wondering how to add Analytics to a Chrome Extension, I've figured it out.
First of all, you have to use Universal Analytics (analytics.js), Google Analytics 4 (gtag.js) will not work. It doesn't handle tasks, and we will need to disable certain tasks in order to send hits. Also, it may be possible to use UA with Google Tag Manager, but after I got so deep into figuring this out I decided it would just be easier for me to implement tracking in the code myself. This video that shows you how to set up a UA property in Google Analytics.
In my code, I created a JavaScript file ga.js, with the typical google analytics tracking code that looks like this:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga("create", "UA-XXXXX-X", "auto");
with two slight modifications: add the 'https:' in front of the google analytics url, and of course add your own UA property id.
After that, we have to disable checkProtocolTask by adding
ga('set', 'checkProtocolTask', null);
This disables file protocol checking, which we need because google analytics aborts the hit if it's not originating from an http or https protocol (this is originating from a 'chrome-extension://' protocol). I also found I needed to disable checkStorageTask in the same manner, though I am less sure why I needed to do that. All of the resources I have found say that only the checkProtocolTask needs to be disabled to use GA in a CE. My best guess is because my extension isn't a popup, but an injected iFrame, so the cookie permissions are different. I asked this question about it, but haven't gotten any responses. In order to still track user sessions without the use of cookies, I used localStorage to store the ga clientId, as shown here.
I then linked this javascript file at the bottom of the head section of my html file, and added
"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
to my manifest.json. And Voila! It's working.
Some last minute notes: I definitely recommend using analytics_debug.js while debugging analytics, and if you are still having trouble figuring out the issue then try setting window.ga_debug = {trace: true}; to get an even more detailed log in the console. Also, when sending pageviews, it is important to include the page in the hit as so: ga('send', 'pageview', '/popup');.
This was an absolute headache to figure out, so I hope this helps someone!

Error when using G-Suite Developer console with Google Sites embedded API

I've written some code that retrieves some data from google sheets then updates some content on my google sites. However, while the script works (when run on localhost) I encounter the
"details": "Not a valid origin for the client: https://966655698-atari-embeds.googleusercontent.com has not been whitelisted for client ID MY-ID. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
However, I enabled this for localhost, cleared my caches. The problem is the 'https://966655698-atari-embeds'. Each time the google site loads it generates a new random number sequence. Does anyone know how to workaround this? The google site uses embedded html which I believe is why the initialization failed.
I have tried to white-list https://googleusercontent.com which didn't work (I didn't think it would because the domain changes) but I'm honestly incredibly stumped.
Google hosts all user content using their somedomain.googleusercontent.com. I do not know for certain, but I'm almost sure that to save space they dynamically host their content, meaning that when the embedded html does not need to be actively hosted, it isn't. I had to find a way to host from a site that would always send the request. For me, I found that github pages was the answer.
I found this on adobe's website which somewhat explains what googleusercontent does. https://helpx.adobe.com/analytics/kb/googleusercontentcom-instances.html
To set up github pages this link will explain how to do so https://guides.github.com/features/pages/
You can add this to the developer Google console relatively easily and any connection will submit from your username.github.io. (I believe it also uses https protocol). It also allows me to implement directly using git version control and implements nicely with WebStorm.

How to use trackPageview in Google Analytics?

I need help in configuring the _trackPageview in the Google Analytics. I want to track how many times a file has been downloaded. According to Google Analytics documentation I need to use the following onClick event in the download links.
<a href="http://www.example.com/files/map.pdf"
onClick="javascript: _gaq.push(['_trackPageview', '/downloads/map']);">
But I could not find any information that after adding this, where I can see the download stats for this link? Do I need to configure anything in my Analytics account? Thanks.
That should work, and you shouldn't need to configure anything in Analytics. You will not see the events appear in the Analytics account immediately. I'd give it 24-48 hours to start showing up.
All clicks should be tracked from when you install the code. It may show up under Top Content, or you could filter visited pages by a partial URL.
Because of the delay inherent to Analytics, it's not uncommon to second-guess yourself when you try a new tracking technique. It's important to follow up and confirm the events are registering.
Edit: More info regarding _trackPageview vs _trackEvent...
_trackPageview: "Google Analytics' _trackPageview is a function for use on ga.js tracked sites that allows you to track events on your site that do not generate a pageview."
_trackEvent: "Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system."
My suggestion is that if you have a number of different downloadable files that you want to track, look into _trackEvent. If you only have one or two files to track, _trackPageview is definitely suitable. My thought is that when you have a larger number of files to track, _trackEvent will let you track by category (file download), action (hyperlink click), and label (map), which may be more useful if you're interested in downloads as a whole.
_trackEvent is also ad hoc in that whatever you code you write should auto-generate the corresponding report items without any configuration in Google Analytics.
More info (above quotes taken from these pages):
_trackPageview: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55597
_trackEvent: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
If you want to make sure your tracking is working but don't want to wait 24-48 hours then go to the Real-Time (beta) tab in the Google Analytics sidebar.
Visit the website on another tab and, once you see that the 'Right now' indicator shows your presence, click on your download link. If you see it show up in the 'Top Active Pages' then you're good to go, gilded and golden.
You can also use the debug version of ga.js to diagnose errors. It prints things like "Invalid tracking code" and so on to the Javascript console.
Search for "Debugging with ga_debug.js" on this page:
https://developers.google.com/analytics/resources/articles/gaTrackingTroubleshooting

Google Analytics to track FireFox extension use

I'm developing a Firefox extension and would like to track its use with google analytics, but I can't get it working.
I've tried manually calling a function from ga.js, but that didn't work for some reason. No error was produced, but neither was any data collected.
My last attempt was to have a website that just holds the tracking javascript and then load it within the extension in an iframe with the URL configured so it contains meaningful data. This way the analytics are getting connected when I visit said webpage with a browser, but not in an extension. I've tried putting some visible javascript on the site and have confirmed the site's javascript is executing. This method also works with other trackers, but I don't like their output and would prefer Google Analytics.
Any ideas what else I could try to accomplish this?
The solution is to use Remy Sharp's mini library for tracking bookmarklets and extensions with Google Analytics. Works like a charm.
Usage is as simple as:
gaTrack('UA-123456', 'yoursite.com', '/js/script.js');
Note that, since it doesn't use cookies, there's no differentiation between pageviews and visits, or for that matter, between visits and visitors. But, the rest of the functionality is fairly reliable.
Depending on what you want to track you may not need Google Analytics. Mozilla's addon.mozilla.org portal already provides comprehensive tracking and usage statistics for addons.
To check if Mozilla provides what you need go to the Statistics Dashboard and choose the statistics for one of the publicly available addons.
Here is a small library to proxy the requests through an iframe hosted on another server: https://github.com/yelloroadie/google_analytics_proxy
This gets around the bug in the add-on sdk that causes ga.js to die (https://bugzilla.mozilla.org/show_bug.cgi?id=785914).
This method allows full use of google analytics, unlike the limited use found in the library by Remy Sharp.
I don't think this is possible. Firefox extensions don't allow you to load pages from other servers. So the only way I can think of is to have an invisible iframe load up the code. The pings to Google's servers need to be from a domain belonging to you. So I guess your own servers have to serve up pages every time a user loads the extension, which just kills your server and defeats the purpose of Google doing all the work!! Please post if you have found a way around it. Chrome extensions can be tracked easily!
For using analytics in the main/background script you might want to use this solution:
https://stackoverflow.com/a/17430194/193017
Citing part of the answer:
I would suggest you take a look at the new Measurement Protocol in Universal Analytics:
https://developers.google.com/analytics/devguides/collection/protocol/v1/
This allows you to use XHR POST to simply send GA events directly.
This will coexist much better with Firefox extensions.
The code would look something like this:

Categories