Just to make this clear, I am referring to this google sign as there are multiple: Google Sign-In for your web app
I have both the meta tag and script tag in the header of my page:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="[ThatsWhereMyIDIs].apps.googleusercontent.com">
as well as the div element for the Sign-In within my body:
<div class="g-signin2" data-onsuccess="onSignIn" onclick="console.log('yay');"></div>
I used the 'yay' to check if the element was triggered, and it is, however the "data-onsuccess" is never called.
What could be the reason for that and furthermore, how do I fix it?
Any help is appreciated.
I have the same problem but only when I deploy. It works in a local server. I think it is because it requires https and I do not have that for the server I am testing.
Related
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>m=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>m=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>m=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.
I'm trying to use maps api (yandex but I have seen similar problem in google maps too) and include its script in head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>site</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js">
<script async src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(59.938518, 30.323342), 10);
};
</script>
</head>
Here is body:
<body>
<div class="map-block_map-item">
<div id="YMapsID" style="width:100%;height:100%">
</div>
</div>
</body>
But when page downloads I get this warning:
"It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
If I don't use async attribute get this message:
A parser-blocking, cross site (i.e. different eTLD+1) script, https://api-maps.yandex.ru/1.1/_YMaps.js?v=1.1.21-58, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details
How can I solve this problem? As I understood it happens on very slow connections (but I have rather fast connection so why?) and it cause block document.written scripts. (I'm new in js so yes I have google it but didn't understand how it can be improve besides async script download)
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
I want to use Google Youtube Analytics API. I know that we have to use Oauth2, so I get my client ID and then follow this instruction https://developers.google.com/youtube/analytics/v1/sample-application cause I use youtube analytics for my web app.
I get confused when my request get error response
Error: origin_mismatch
I have checked my Authorized JavaScript origins, make sure that they are same. I also host my code.
EDIT
just in case you wonder my code, here my index.php file
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script>
</head>
</body>
<div id="login-container" class="pre-auth">This application requires access to your YouTube account.
Please authorize to continue.
</div>
<div class="post-auth">
<div id="message"></div>
<div id="chart"></div>
<div>Choose a Video:</div>
<ul id="video-list"></ul>
</div>
<body>
`
Did I do something wrong???
thanks in advance!
Make sure that the OAuth ClientId you're using matches with the URI Origin you've specified in your Google Dev Console. For example you have this Client ID 1234567890 for the URI origin http://www.mysimplesite.com in GDC, that ClientID will only work on that domain.
If you want that Client ID to work on http://www.myawesomesite.com as well, you'd have to add it on the list of URIs. If you use it in a domain not specified in "Authorised Javascript origins", you will have origin mismatch error.
Note: Make sure you've enabled Youtube API as well.
For additional reference you may check this SO thread as well.
I have found my solution myself. I just change immediate: true to immediate: false on checkAuth function. I dont know why, but it works.
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>