Develop Reference

Integrating GA in chrome extension, manifest v3

I need to integrate GA into my chrome extension, using manifest v3. it looks like I miss something, but I can't figure out what exactly I'm doing wrong.
My extension has only a content script and background.js where I'm listening on events, to execute content.js when the user clicks on the Icon, in the extension toolbar. Content script by himself injects widget UI into websites, where users can interact with. And I need to track click events.
And in terms of manifest v3 enter link description here, I need to use protect GA scripts like
"content_security_policy": {
"extension_pages": "script-src 'self' https://www.google-analytics.com/analytics.js"
},
But when I try to refresh my extension on chrome://extansions page, it throwing me a popup with a failed status
Maybe someone has any ideas on how to solve this problem?

I was able to do this by embedding the analytics.js file into my extension.
Then the ga function would be availabe in the window scope window.ga on the content scripts.

You are trying to use the analytics embedding documentation and request a script at "https://www.google-analytics.com/analytics.js ". But according to this document, for extensions you should use the following version: "https://ssl.google-analytics.com/ga.js". (and update manifest accordingly)
In the given document you can find more detailed information on the implementation of Google analytics in the extension:
https://developer.chrome.com/docs/extensions/mv3/tut_analytics/
Important clarification:
Even if you correct everything according to this official documentation, you will probably get a manifest filling error. I have not found a solution to this problem and, in general, it seems that it is impossible to connect Google analytics to the extension with version 3 of the manifest (this is inaccurate)

Google Analytics code is on my site, but invisible

On my website ( https://www.smilinggardener.com/ ), the Google Analytics tracking code isn't visible in the page source code, and Google Search Console can't see it in order to verify my site.
Yet the Google Tag Assistant says it's there, and when I run developer tools and go to 'network', I see the analytics.js file is loaded, and most important, it is tracking visitors.
Any ideas what could be going on?

The analytics code is loaded via an external file.
If you look at your network tab in Chrome there is a column "initiator" (if it isn't there by default you can enable it by clicking the table header and check the respective option). The initiator is the file (if any) that triggered an external dependency.
That in your case the filename contains a complicated id suggests that it is dynamically created by some extension in your CMS.

How to catch 'ga is not defined' in your dev environments

So I have my development environment, and every time I run the project, I have a javascript error in my console:
ga is undefined
Of course I am not at the correct domain so Google Analytics see this as an issue and I am fine with that, but it doesn't allow the rest of my Javascript to run so I have modals and other JS based functionality that stops working.
My thought were I could just write a wrapper method and check for ga undefined. But before I do that I just wanted to see if there was a better solution or possibly different way of thinking about my setup.
Cheers,
Devin

I solved my issue with a method of redefining ga rather than trying to catch the error. In the backend we had logic to only included the Google Analytics script tag if the host url included our domain so when it was localhost or a dev url the script was not included.
So as a resolution I took the answer from this SO question ( Google Analytics Tag for Dev vs. Prod ) and implemented a similar solution in the backend instead and excluded the following code when not our production website domain.
ga('create', 'UA-********-1', 'mywebsite.com');
The result, ga was still defined but does not send data to our Google Analytics account.
Good Luck,
Devin

Angulartics not tracking at all

I'm using angulartics for my application to track virtual page views on Google Analytics. This should be enabled by default but no visit to the page is tracked at all.
I should say that I wrapped the Google Analytics js code in a angular directive to be able to turn analytics off on my test server.
Otherwise its pretty standard, I included the angulartics source files in my index.html, added the module to my app.js and removed the ga('send', 'pageview') from the Google Code (as it is described in the docs).
I also found this hard to test. Should I see REST calls in the network console to verify its working? Because I'm not seing any (except the analytics code being loaded from the Google server).
Any idea what I am doing wrong?
Thanks,
Flosky
[edit]I should probably also mention that I'm using the angular ui router and not the default one[/edit]

Test Google Analytics on Localhost

I need to test some custom firing events using Google Analytics. I'd like to test in a local environment.
I've set up my test site using apache with server name: my-ga-test.localhost/
According to Can you test google analytics on a localhost address? and Google Analytics docs, I'm able to adjust my GA code to use:
ga('create', 'UA-XXXX-Y', {
'cookieDomain': 'none'
});
I tried to set up a new account to get a tracking ID for this site, but I'm getting the following error:
URL ends with an invalid top-level domain name
How do I generate the code using localhost domain so I can alter the tracking ID code to put on my localhost?

The "Website URL" field when creating a new Google Analytics property does not have to be the same as the actual URL that's used in production. It's primarily used for resolving relative links, not for validating hits.
Just change it to something else (like example.com), and everything should work fine.

I do not recommend the above answer.
I believe the best practice is to use the Analytics Debug js on your localhost. Debug prints in console EVERYTHING is doing, including firing events. That way you can check if your code is working or not without sending tracking info to Analytics on Localhost (which makes no sense).
Find out more here :)