Confirm if google analytics is well implemented - javascript

Intro: I'm having a problem implementing google analytics in a website that is not mine and would like to correctly implement it and confirm without the need of waiting several hours untill google checks my website again.
Main problem: I copy pasted the script code to every page on the website (all html) but google isn't detecting it. I suspect the problem is in the first index.html on the root of the website but for now I must have it there so please don't tell me I have to remove this file. That is not the question.
Code of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
<!-- GOOGLE ANALYTICS PASTED CODE IS HERE -->
</script>
<!-- TITLE AND METADATA ARE HERE BUT NOT RELEVANT -->
<meta http-equiv="REFRESH" content="0;url=http://www.FAKEDOMAIN.com/Site/index.html">
</head>
<body>
</body>
</html>
Extra info: Google control not installed because it says it doesn't detectes the code on initial page. I think it is because the script might not be tottaly executed and then the page refreshs to another link and google will just consider that the script isn't installed on the initial page because the script wasn't tottaly run. Is there a way I can force the full execution before redirecting? Then a way to confirm with alerts if the data is being collected properly so that I am sure it is just a matter of time before google analytics control is properly installed?

I don't believe Google actually attempts to detect the code on your page. Rather, the page runs and the script executes and pings some Google server to report the usage. Once this usage gets reported, you'll start seeing activity in your Google account. This might take a day or two.
I think you're right about the meta refresh though. Once the meta tag is encountered, the browser will redirect and script on the page is not executed. I would suggest removing the <meta> tag and redirecting with script, after the Google Analytics code is run:
<script>
// GA code here
location.href = 'http://www.FAKEDOMAIN.com/Site/index.html'; //Redirect here
</script>

Related

How do I get gtag to send events automatically?

I am trying to add Google Analytics to our website using the gtag API.
Most of the events I am interested in happen in our PHP code, so I collect them in the session and inject them into the next page that renders. This allows me to handle eg. a login followed by a redirect to the home page.
However, when I try and load the page, none of the injected events are triggered.
I know the system works as I can bind a 'gtag' call to a button's onClick event and it works when I click it, but the automatic ones don't.
Here is an example file: test.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Analytics</title>
</head>
<body>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
// First attempt: Added to the datalayer with the rest of the config.
gtag('event', 'test-event-1');
// Second attempt: Added once everything has finished loading.
window.addEventListener('load', function () {
gtag('event', 'test-event-2');
})
</script>
<div class="container">
<h1>This is a test</h1>
<p>Click to trigger another event.</p>
<!-- Successful attempt: Event is triggered when run from a button event handler. -->
<button type="button"
onclick="gtag('event', 'test-event-3')">
Send Event
</button>
</div>
</body>
</html>
When I open this page with Firefox's Network tab running and click the button, I can see the following URLs sent:
GET "http://testapp.localhost:9009/analytics-test.html",
GET "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
GET "http://testapp.localhost:9009/favicon.ico",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeav0&_p=22328352&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&_s=2&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&en=user_engagement&_et=4840",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeb20&_p=1344830813&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&_s=1",
POST "https://region1.google-analytics.com/g/collect?v=2&tid=G-XXXXXXXXXX&gtm=2oeb20&_p=1344830813&cid=1447481123.1666024506&ul=en-us&sr=1920x1080&_s=2&sid=1667482491&sct=17&seg=1&dl=http%3A%2F%2Ftestapp.localhost%2Fanalytics-test.html&dt=Test%20Analytics&en=test-event-3&_ee=1&_et=14263",
The 'en' is the event name, so you can see that only 'test-event-3' is sent to Google.
Please can you let me know how to change the code so that 'test-event-1' and 'test-event-2' are sent to Google as well?
Ok, many issues, but the most likely issue here is that your config happens before the library is loaded. Move your gtag config to the window load. Gtag may not be smart enough to retroactively inspect the dataLayer.
Another issue here is that you seem to be looking at the network tab. There's a way easier way to debug analytics. I suggest trying the Adswerve debugger extension. It shows your events in a much easier to look at presentation right in the console:
Good. Another issue here is that you're editing a php file. This kind of implementation is being frowned upon by the industry. There are many problems around implementing tracking in backend files. Implementing it in the template files would be a bit better, but still quite a poor design.
The proper implementation would be using GTM. GTM would handle retroactive datalayer pushes better, but you would also likely not need them with GTM. GTM is basically a script that is able to intelligently load other scripts whenever is required and translate business-like logic set via its UI to code. So with GTM, you just load it on every page and the rest of the tracking is done in its interface.
While doing gtag calls manually is a way to implement tracking, it's like making a site with no web-server, just quickly deploying your own backend network listeners that would spew html in response. A very odd and niche choice not making sense in vast majority of cases. Don't expect this kind of tracking to live long, to be appreciated, to be scalable or manageable or even to be very useful. Not a great legacy either.

Google sign-in API without basic profile info

I am trying to simply get the Google sign-in button working on my website, but I am stuck at the following step:
Getting profile information
As you can see, Google has taken an extremely straightforward task and made it impossible with contextless code snippets, and I am absolutely stuck. Right now, all I have done is put the following in the head of my HTML file:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="(I PUT MY CLIENT ID HERE ALREADY).apps.googleusercontent.com">
All I want to do is sign the user in WITHOUT requesting email address. My problem is the following:
WHERE do I put the gapi.load('auth2', function()... code snippet? At the top level of my webpage's JavaScript file? In the body's onload function? In the onSignIn function? NONE of the above are working. I get an exception, or it says "gapi is not defined" or it says "auth2 is not defined" etc... And once that code snippet is in place, where do I put the if (auth2.isSignedIn.get()) code snippet? You'd think the geniuses at google would think to include this incredibly simple, vital information in their tutorial. Incredibly frustrating.
You can pass the url a callback function to be run when the javascript gets loaded.
<script src="https://apis.google.com/js/platform.js?onload=googleLoaded" async defer></script>
So in your code you can do
function googleLoaded(){
// The script is ready to use.
// gapi.load('auth2', function()...
}
found here https://developers.google.com/identity/sign-in/web/build-button

Hidden HTML Iframe

I have a page with iframe, to simplify this case lets assume that it looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://example.com"></iframe>
</body>
</html>
Assume that the page is on the Internet and you enter it. It loads http://example.com inside the iframe.
I want to change this so that you couldn't see the http://example.com because you can open this adress only using my page not just putting http://example.com in second tab of webbrowser.
I see http://example.com in page source (right click -> page source)
I also see in the network in developer tools that the browser makes request to http://example.com. So I just can copy this address and open it in new webbrowser tab.
What should I do to make it impossible for you to know the address: http://example.com
The only way I can think of is if you screen scrape the page in your code and serve up the html yourself. So it would look like this:
Someone makes a request to your page
Before you serve the page in your back end code you grab the html on
example.com
Serve up the html that comes out of the back end request
This may not be formatted properly though because you are missing css or lose functionality because you are missing js but you just need to make sure you include that stuff.
An IFrame is client-side.
This means for the browser to render the IFrame, it must be visible to the client web-browser.
The only way to hide it is for you to develop a web proxy.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="grab_secret_site.php"></iframe>
</body>
</html>
Here, the code within grab_secret_site.php would make an HTTP request to http://example.com to grab the HTML. An example here. However, bear in mind that any resources won't load unless you rewrite them.
e.g.
<img src=icon.jpg />
Will point to icon.jpg on your site, not on example.com.
If you don't want the page to be loaded without the parent frame, you could create a session variable (e.g. PHP session) in the outer page, which is then checked within the IFrame. If it doesn't exist, redirect the user back to the outer page.
There is a header - X-Frame-Options that allows you to block opening page in iframe, but in this way I think It's impossible.

How to reload stale external google maps api javascript

So we have a chrome extension and the background.html looks like this
<!DOCTYPE html>
<html>
<head>
<script id="google-maps-js" type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&key=AIzaSyCnHJh2lsVbM_fPXgwciRO-fInFgkkEebw&sensor=false&libraries=places"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/background_helper.js"></script>
<script type="text/javascript" src="/background.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The google maps api js is loaded once when the extension is installed or when the browser is first opened but if the browser is left open for more than 3 days, the geocoder service starts to return 403 errors and I believe it's related to the problem mentioned in the answer to this question:
After months of 100% stability, today I get 403 Error on google maps services
It seems that after 3 days, the javascript becomes 'stale' and google will return 403 errors to any requests.
I tried putting in a timer so that every 24 hours it removes the google maps script tag and reads it but then I get errors saying I've included the google maps script multiple times and it will behave unexpectedly.
How do I "reload" or "refresh" the javascript so it's no longer stale?
You should be able to simply manipulate the <script> element.
Delete it from the DOM by id, and insert an identical copy. That will re-run the script, and the server should be configured to disallow caching if it is indeed getting stale.

jQuery: Can't run $.get (http get) on Chrome

I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.

Categories