Google Analytics: setting _trackPageview onLoad - javascript

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.

Related

How to prevent Google Tag Manager overwriting document.write()?

We are using Angular for our Website. As not all Pages have been ported to Angular, we implemented a hybrid approach:
Every request goes to Angular first. When it has been loaded, it checks if the Route exists
If not, the HTML-page is fetched from the backend
The html-Element in the DOM (i.e. the complete page) is replaced with the response's body
ngOnInit() {
this.railsService.fetchRailsPage(this.router.url).subscribe(
(response) => this.replaceDOM(response),
(errorResponse) => this.replaceDOM(errorResponse.error)
);
}
private replaceDOM(newContent: string) {
document.open();
document.write(newContent);
document.close();
}
Since all a-hrefs in old pages are plain old hrefs (not Angular's routerLinks), once the user navigates away, the page is reloaded and Angular kicks in again.
So far, it works, but: I noticed that sometimes the DOM is not replaced with the response body.
Debugging brought us to the conclusion that Google Tag Manager could be the issue. It overwrites document.write() and a lot of other default Javascript functions.
Why is that? And how can this be prevented to get the default version of e.g. document.write()?
Seconding Alan here.
Please make sure you're running two tests:
Block gtm with the request blocking function of the dev tools and try reproducing the issue.
Try creating an empty GTM container, loading it on page and reproduce the issue.
If the first test shows that The issue persists with GTM blocked, then it's not GTM.
If the second test shows that the issue is solved, then it's not about GTM but about the logic used in it's configuration.
If anything, I would first make sure no custom code in GTM additionaly overrides document.write (which I've never seen before, but it's definitely possible). Then I would broadly audit all custom scripts deployed by GTM. After that, I would try pausing all the element visibility triggers if any are deployed and seeing if that helps.
GTM likely would aim to override write to be able to watch DOM changes. But it does so gently, adding a bit of tracking there and not changing the essence of it. It's severely unlikely that GTM's core logic would conflict with Angular.
//UPD just had a chat with a colleague on Measure. It looks like the only scenario when GTM overrides the document.write is when there are Custom HTML tags that have an option to "support document.write". The Element Visibility trigger uses mutation and intersection observers rather than listening to document.writes.

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.

Why won't Google Analytics track page views from my off-site order form?

I must be doing something wrong here. I'm trying to use Google Analytics to track hits on a form hosted by InfusionSoft (our CRM/etc provider) on their domain. We want to track hits under a separate domain in GA.
here is the form in question: our order form
I have tried several forms for the GA code -- first the async snippet, then the 'traditional' snippet, now back to the async. Here is the async code I'm trying to use (inside the <body> tags):
Near the top of the page
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setDomainName', 'oursite.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview', '/saleform/67']);
</script>
Further down the page
<script src='https://ssl.google-analytics.com/ga.js' type='text/javascript'></script>
Relevant information
Using Firebug or Chrome's dev tools, I don't see any errors coming from GA when using this code.
Tracking is already working on oursite.com, but does not receive data from this page.
In Firebug's console, _gaq and _gat seem to be working fine (no errors, they appear as objects with a lot inside)
__utm.gif is NOT being requested. I know this is a Bad Thing but am unsure what to do about it.
Using a Firefox extension to view cookies, I do NOT see any cookies being set for the domain specified in the above code (or the site hosting the form). edit: after including _setAllowLinker on our site, cookies DO seem to be working (showing up on the page)
Additionally, I have tried manually firing the _gaq.push(['_trackPageview', '/saleform/67']); method from the JS console (with no luck--the page does not show up in GA).
Please let me know if there's any pertinent information missing from this post and I'll be happy to update it. Thanks in advance for any insight you can offer.
After much fiddling with the code on the various pages, I've found a solution that works to my satisfaction. I'll detail the three things that seemed to make the difference in this case.
Hope this helps someone out there, and don't forget to vote up if it helped you!
Set up the normal GA code on our own website, including _gaq.push(['_setAllowLinker', true]);
On the order forms (hosted by InfusionSoft in our case) set up the GA code as instructed by their website, but include _gaq.push(['_setDomainName','none']);
Important: add onClick handlers in javascript which call _gaq.push(['_link', 'http://your.link.tld/etc']);
For point 3, I used a snippet of jQuery to identify links to order forms on the webpage and bind the GA function call with click() -- code for that is below.
<script>
jQuery(document).ready(function() {
jQuery("a[href*='/sale-form'],
a[href*='/another-order-form-link'],
a[href*='your_site.infusionsoft.com/saleform/']").click(function() {
_gaq.push(['_link', this.href]);
return false;
});
});
</script>
Explanation of code:
wait for the page to be ready
search for any links with href containing your search terms (more on that here
bind the _gaq.push(['_link', this.href]); function call to the onClick event handler for any links that were found in the previous step
Additional note: if you include this jQuery code, you'll have to have the jQuery library loaded. Also, obviously remove the <script></script> tags if you're including this in a .js file.

When accessing site from external network using IE JS/CSS(YUI) based UI is not working correctly

We have ASP.NET application in which we have used the YUI to generated the popup for user interface. Now when I amd testing the locally isntalled site the popups are comming correctctly withoug any error and also getting displayed correctly on all the browwsers (including IE 7/8/9).
However when the site is exposed on the server and i tried to test it from the outside network the YUI popup's are not getting genrated correclty like if some Javascript or CSS are not getting loaded or are cached. Generally Ctr+F5 does the trick to flush local cache and to fix the issue we have added query parameters xyz.css?v=10 trick. But its not working. Now this issue is showing only on the IE(6/7/8/9) and other browsers are working correctly. To check the issue i again logged into the production box and found that popup is appearing correctly on IE also.
Now i am not having clue how it could possibly happen. Does any one has came across anything like this? What could be the cause of the issue and how to fix it ?
Thanks
As far as I know, IE caches GET responses.
The xyz.css?v=10 trick is used when you want it to use cached CSS but only as long as it is the same version. Whenever you change something in the css you need to change the url (ie xyz.css?v=20).
If you want IE to NEVER use the cached css, you need the URL to look different everytime. you can do that by adding some timestamp to the url.
something like:
xyz.css?v=201201180600123
(201201180600123 is a timestamp)

Google Analytics testing/sandbox environment?

Is there any Google Analytics testing/sandbox environment for testing your JS custom code before putting it to live system?
I don't want to use my real tracking ID to see if everything is correct on my dev. environment, neither I want to put my code untested live...
Is there any techniques or maybe some fake Analytics tracking lib I could use for testing?
The Google Analytics Debugger Chrome Extension is very helpful in testing Google Analytics code. The extension outputs the data sent to Google Analytics to the JavaScript Console Window. The days of you...waiting around...hoping/praying to see your test Pageviews in Google Analytics are over.
Below is an example of some of the output the extension prints to the JavaScript Console Window:
Track Pageview
Tracking beacon sent!
Account ID : UA-2345678-90
Page Title : About
Host Name : www.yourdomain.org
Page : /about
Referring URL : -
Language : en-us
Encoding : UTF-8
Flash Version : 11.1 r102
Java Enabled : true
Screen Resolution : 1680x1050
Color Depth : 16-bit
Ga.js Version : 5.2.4d
Cachebuster : 476867651
I believe it is possible, but you have to tell it to not use the domain when setting the cookie...
var pageTracker = _gat._getTracker("UA-12345-1");
pageTracker._setDomainName("none");
pageTracker._trackPageview();
And you probably have to use a legitimate tracker ID.
Also, be sure to see Analytics Customizations: Using a Local Server
Why don't you just create a new tracking code / profile in GA? That way you can see the results on your dev server and then switch to the real tracking number when you move to live.
I think a lot has changed since the question was asked, but I believe I should add this here just for the new visitors since it is not in the answers.
Google Analytics now has a Sandbox Account that you can create. Check out the source for the direct announcement by them.
Short instructions from the link:
If you already have a Google Analytics account, you'll need to create a new one as your "sandbox" by following these instructions:
Click Admin at the top of any Analytics page.
In the Account column, click the menu, then click Create new account.
Follow the instructions.
Source:
https://groups.google.com/forum/#!category-topic/digital-analytics-fundamentals/6EYCkNdE2No
I think it should be done with "views" in 2019.
Create views for development and production https://support.google.com/analytics/answer/1009714?hl=en
Create a custom dimension "environment" = "test" / "prod". Send it from website/app.
Create filters by custom dimension "environment" on view level https://www.bounteous.com/insights/2015/10/16/filtering-session-user-custom-dimensions-google-analytics/
Maybe for some projects filters can be done by URL instead of custom dimensions.

Categories

Resources