How do I integrate Google Analytics into GWT applications? - javascript

I have two problems...1. I have never used google analytics, and 2. I have never used, made, or touched a GWT project until now. I am trying to get google analytics to work with a GWT application. I read through this: How to integrate Google Analytics into GWT using the asynchronous script and the question that it links to with no luck.
There is a new version of Google Analytics out which uses a new
analytics.js script. It's the same process though, just add the script
in your html header:
<script>
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-YOUR_ACCOUNT-X', 'auto');
ga('send', 'pageview'); </script>
For my case, the project is large and I am not sure which html file I need to put the google analyics js in. I am assuming the html files in the war folder.
As for this bit:
call the new methods like so:
public static native void googleAnalyticsTrackPageView(String url)/*-{
$wnd.ga('send', 'pageview', url); }-*/;
I am totally unsure where I need to include this.
Oh, one last question. Is this still how I would test locally?
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

In your war folder there should be an index.html or index.jsp file that serves the GWT JS file (xxx-nocache.js). You need to put the script there.
Alternatively you can also use Arcbee's universal-analytics library.

Related

Google Analytics simple client

I am trying to integrate GA into a QT5 / QML project. For this I created a dummy GA web page project to test connectivity. First step is to test the setup with a simple web page (code below).
I had to specify a URL for the GA project. The page, however, is on my desktop, not online. I see no traffic in the real time GA view. Not sure why. Is it that my page is not on www.my-domain.com but literally on my desktop?
SETUP
On the GA settings page, this is my setup
Basic Settings
Tracking Id
UA-1234567890-1
Property Name
Default URL
http://www.my-domain.com
LOCAL TEST PAGE CODE
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
(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-1234567890-1', 'auto');
ga('send', 'TEST');
console.log(ga.q);
</script>
</head>
<body>
<button onclick="ga('send', 'BUTTON PUSH')">
PUSH ME
</button>
</body>
</html>
I have used GA before and do not remember the integration was this bumpy. Right now, I am also confused by the difference of GA view and Firebase view on the live report. However, I first need to establish proper tracking.

Google Analytics not working with Barbajs

Trying to use the latest google analytics tracking code in a site that uses Barba JS but it will not track past the first page, ie the path of the user, any ideas anybody?
The reason it is only working on the initial page is that the default GA snippet implemented using gtag.js only runs once after load. Since you're using it in a SPA setting, you need to manually re-send the page data when you route. Looking at the barbajs documentation, I think it'll be something like this:
// define a global hook, using afterEnter, but you can adjust to enter, beforeEnter, etc as you see fit.
barba.hooks.afterEnter((data) => {
// this hook will be called for each transitions
//data.current.url is the page path.
gtag('config', 'UA-#######-1', {'page_path': data.current.url});
});
use full code provide with google annalitics
https://developers.google.com/analytics/devguides/collection/analyticsjs/?hl=en
in you JS add
(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-Y', 'auto');
ga('send', 'pageview');

analytics.js URL Calls

I use analytics.js on a html page behind a hotspot. So the internet connection is limited to certain URLS.
I need to open on walled garden all the URLS used by analytics.js to make work correctly google analytics.
I did add:
ssl.google-analytics.com
*google-analytics*
*doubleclick*
But still need more URLs.
I've tested that adding
www.google.es and www.google.com analytics works ok and no errors appears on the urls called by analytics.js but I can NOT open www.google.es and www.google.com for other devices uncompatibility so I need to know the URLs need to be opened to have analytics working ok.
I found reading analytics.js that there is:
https://ampcid.google.com
https://www.google.%/ads/ga-audiences
google.com(:\d+)?\/optimize\/opt-launch\
I did add this URLs + Folders on walled garden but still not enought.
Can anyone help me on build all the URLS+Folder list used by analytics ?
Thanks a lot.
Added Image I can see on Network from a browser:
Added 2:
I have this script:
<script>
(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-48205710-1', 'socialwibox.com');
//ga('send', 'pageview');
</script>
And have problems just when calling ga('send', 'pageview');
without ga('send', 'pageview'); i don't have problems.
Oscar.
The basic endpoint for Google Analytics collecting data is
POST/GET /collect HTTP/1.1
Host: www.google-analytics.com
Additionally, demographics data may go to
http[s]://stats.g.doubleclick.net/r/collect
analytics.js script is loaded from
http[s]://www.google-analytics.com/analytics.js
if gtag.js or google tag manager is used they are loaded from
http[s]://www.googletagmanager.com/gtag/js?id=XXXX

How does Google Analytics site verification work?

I am new to web development and I would like to verify site ownership using javascript, similar to what Google does with their analytics code. I have a django app that lets users sign up for a service, but I need to validate that they own the site. Here's a very high level description of what needs to happen:
The user signs up and is given a verification code
I generate a snippet of code to put on their site
They return to my site and click 'Verify'
Here's googles code. Can someone break down for me what this is doing and how it's used to verify site ownership?
<script type='text/javascript' id="verification code">
(function(){
// create a new script element
var script = document.createElement('script'),
script.src = '//www.google-analytics.com/analytics.js';
script.async = true;
// insert the script element into the document
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript)
})();
</script>
Let's ignore the js for the moment. Your core question is how to verify site ownership. So I'm going to tackle that first.
What Google is doing is having you insert some code into a webpage that you have control of. The assumption is that if you have control of www.example.com, you can get that bit of code served at www.example.com to someone. And that's a pretty safe bet.
Now back to that code snippet you gave. For one thing, it didn't look familiar to me whatsoever. It must be an older format, because what's current is below:
<script>
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-123456-7', 'auto');
ga('send', 'pageview');
</script>
In any any case, there's a great read here on why Google has changed their approach over time for how it loads this script: http://www.stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/

Setup Google Analytics with Meteor App: Tracking not Installed Error

I am Trying to set up Google Analytics with Meteor and always get a Tracking not installed Error.
I have already tried to use the meteor Packets, I have tried to include the tracking code in the Head Section, in the Body section and as a rendered Callback on a template.
I always get the error from the Google Analytics Site "Tracking not Installed"
What is the best practice of GA tracking in Meteor Apps?
You don't need a package for GA, probably easier to do it yourself, like this:
First, put the GA tracker id in Meteor.settings.public. (more info about that here)
Then, create a file for the client, probably in the lib folder, for example /client/lib/google_analytics.js and add the regular GA tracker to it:
// CLIENT
/*****************************************************************************/
/* Google Analytics */
/*****************************************************************************/
if (Meteor.settings.public.GaTrackingId) {
(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','//www.google-analytics.com/analytics.js','ga');
}
Last, create another file to track the page load. You can do this in a Meteor.startup() method, but you don't have to as the tracker code is in /lib which is loaded before everything else.
// CLIENT
if (Meteor.settings.public.GaTrackingId) {
ga('create', Meteor.settings.public.GaTrackingId, 'auto');
ga('send', 'pageview');
}
That's it. Now you can also do GA event tracking, etc. from anywhere in your app if you'd like to.

Categories