Determine if Google Analytics is loaded - javascript

I'm trying to track specific actions using Google Analytics, but I don't want to track them locally when I'm developing the site. Locally I don't load Google Analytics, so I'm trying to only enable the tracking if GA is loaded. When I added the condition shown below it stopped tracking actions, any thoughts on why?
if (typeof _qag != "undefined") {
_gaq.push(['_trackEvent', ucfirst(Site.page.tabs.main.getSelected().attr('data-siteName'))+' Tab', 'Clicked deal header', ucfirst(Site.page.tabs.getSelected().attr('data-siteName'))]);
}

Shouldn't it be "_gaq" instead of "_qag" on your if?
That way it's always false.

Related

How to check if GA4 or Universal Analytics is installed?

I'm trying to detect on websites using Javascript if they have the new GA4 installed or the old Universal Analytics.
While for UA detection I can use typeof(ga) !== "undefined", not sure how to do this for GA4.
Based on information here: Seems to be using also ga? Any other difference that we can use on client side?
hy,
we use to do it like this for GA4:
if(typeof gtag === 'function' ){
gtag('event', 'myeventname',{
'event_category': 'myeventcategory'
});
}
please note that this will only work if you have GA4 tracking code installed directly in your page. if you use google tag manager, this won't work.
For detecting Google Analytics 4 (GA4) on a website, you can check for the existence of the gtag function, as GA4 uses the gtag.js library. Here's an example:
if (typeof gtag === "function") {
console.log("Google Analytics 4 is installed on this website.");
} else {
console.log("Google Analytics 4 is not installed on this website.");
}
Note that if both GA4 and Universal Analytics (UA) are installed on the same website, you will need to use the gtag function to send data to GA4 and the ga function to send data to UA. In that case, you will also need to make sure to send the data to the correct property by specifying the correct tracking ID.

Reliably fetching the Google Analytics Tracking ID from another script

I need to retrieve the Google Analytics Tracking ID via JavaScript for use in another script. Something like:
var ga_id = (typeof ga !== 'undefined') ? ga.getAll()[0].get('trackingId') : 'Unable to retrieve GA id'
My Analytics is loaded using Tag manager, so even though I'm running my own JavaScript quite late in the page, its not detecting the presence of the ga object. ( I can access it without a problem via the developer tools console.)
How can I ensure that ga has loaded before trying to access its properties?
It's there on window loaded and you can see it in the GTM preview like so:
I have this CJS in that var (used your code):
Although this is ample in my case, yours may differ, so what you can do is the following:
Make a custom html tag that runs on pageload and deploys a closure with a timeout in it.
In the timeout callback push a dataLayer event.
Now move the tag that you want to get the value of the property id for to the dataLayer event trigger (custom event).
This is not very elegant, but it'll work. Again, for normal implementations, Window Loaded should be ample.

How to implement Google Analytics event tracking inside a React VR project?

This is loosely written to give a basic idea of what I'm trying achieve.
< VrButton onClick={props.userClick}>< /VrButton>
userClick={() => this.triggerTracking}
triggerTracking() {
ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
}
I expect the code to trigger Google Analytics event tracking in the GA system when the user clicks on a button, but I get an error message - "ga is not a function".
I have GA set up in my index.html file, with the proper ID, and pulling in the latest analytics.js API.
React VR is all within a web worker context so it is not possible to access anything on your window without the use of native modules.
You can embed them directly in your client js and use the GA tracking functions as you normally would there. You will then call a function on your native module within your react VR app.
You can check out the documentation here: https://facebook.github.io/react-vr/docs/native-modules.html
Try using the window scope as:
window.ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
I'm not familiar with React at all, but perhaps React causes some abstraction between the window and the react scope, making your ga() function unavailable.
Do next stps:
open the network debug tool of your browser.
reload your page
review loaded url list and check that www.google-analytics.com/analytics.js is loaded
If you does not see such url loaded - read google analitycks manual about how to setup google analytics on your page.
If you see such url replace url www.google-analytics.com/analytics.js with www.google-analytics.com/analytics_debug.js in your page, than reload and than go to console tab of your browser debugger and check the errors.

Moving to Google Tag Manager broke our virtual pageviews

I recently transitioned my company's websites to Google Tag Manager. Due to the fact that our contact forms don't have unique confirmation pages with unique URLs, we use virtual pageviews to track conversions. The form is submitted, and the page reloads with new content and our conversion tracking codes.
Since migrating to GTM, all of our virtual pageviews stopped working. Now when I submit a form on our site, I get this in the console log:
ReferenceError: ga is not defined
ga('send', 'pageview', '/funnel_G1/premium1.html');
Before, we had Universal Analytics loading directly on the page. Now we are loading Universal Analytics through GTM. That is all that has changed and I can't figure out why our virtual pageview scripts no longer work.
This is script that fires on a form completion:
<script type="text/javascript">
$(document).ready(function () {
ga('send', 'pageview', '/funnel_G1/premium1.html');
});
</script>
When you moved to GTM, you likely also correctly removed all on-page GA code, which includes the standard GA snippet and also the
ga('create', 'UA-.....');
ga('send','pageview');
code. Removing the GA snippet also removes the creation of the "ga" object, which is why you are getting the error you see. With GTM, you will now need to send in your events and pageviews with tags. So what you could try to do is to push events to the dataLayer that help to trigger tags that fire your virtual pageview. In your specific case, you could do something like this when the form is submitted:
dataLayer.push({
'event': 'form complete',
'vpv': '/funnel_G1/premium1.html'
})
and then in GTM, you would need to create pageview tag that is triggered by the event 'form complete', and that also alters the page value to the value of the 'vpv' dataLayer key (ie. /funnel_G1/premium1.html).
The problem is that, GTM loads ga() function asynchronously. If you call ga() before it's loaded, you will run in to this error.
Solution is to somehow wait for ga() to be defined, or use dataLayer.push()
Edit
The solution we ended up using - we just did not include Analytics in the GA, but included them separately in source. GTM would handle other script icnludes except GA. This solution atleast did not break ga() usages throughout our project.

Google Analytics: setting _trackPageview onLoad

Does anyone know why this:
$('document').ready(function(){
_gaq.push(['_trackPageview', '/my-custom-url']);
});
..wouldn't get picked up by GA?
We have an embedded service which displays different states of a page (same URL), depending on where the user is in the journey - hence the need to set a custom URL for each phase.
The code looks fine but without knowing your domain and seeing the GA set up script it's hard to guess.
I'd suggest installing the Google Analytics Debugger Chrome Extension. This might let you know if the gaq had any issues getting setup.

Categories

Resources