Javascript Overlay/Dialog Tracking with Google Analytics - javascript

Using javascript (jQuery to be precise in my case) I need to enable a dialog box to be tracked in Google Analytics as a unique page view, despite it being only a modal overlay.
For context purposes I dont want the user leaving the page and the dialog content is loaded in via an ajax call.

Assuming you're using Google Analytics new async code, all you need to do is place this code in the JavaScript block where you render your modal dialog.
_gaq.push(['_trackPageview', '/fake/modal/path/here']);
If you're using the old code,
pageTracker._trackPageview('/fake/modal/path/here');
The basic gist of this is you should attach the _trackPageview call anywhere you're binding an event event that changes the modal. If you're doing this for multiple modal pageviews, you'll need to either manually code each internal modal page, or programmatically name them. If these modal changes trigger changes in the URL's hash, you could try this approach: Tracking Anchor Links in Goal Funnels

As per Google's documentation, ga.js is now a legacy library. So if you are using the latest version of this library, which is analytics.js, then the response would be:
ga('send', 'pageview', '/fake/modal/path/here');

Related

Rewriting URL in AJAX application

I am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.

Reparse Google Plus Button?

I have a website where pages are loaded via AJAX so I reload the Facebook comments box and like button (FB.XFBML.parse()) each time a link is opened. I was wondering if there is a similar way to reload the Google Plus button with JavaScript for a page.
Parsetags should be set to explicit.
See: https://developers.google.com/+/plugins/+1button/
Then you can call gapi.plusone.go(); to have the tags re-parsed.

How do I track Fancybox clicks in Google Analytics?

I have a page with 24 links that each open up a .html file in a modal window with Fancybox, and each .html file has a video embedded in it. How do I track to see who is opening which videos?
How google analytics works
You put a by Google provided javascript (the tracking code) on your page .
Everytime the page is loaded, the javascript is executed and a hit is recorded by Google.
How fancybox works
You can use fancybox in different ways but the default behaviour is that you feed it a link and it will open the content of this link inside an iframe
If you know how iframes work, you should know that they just load/display a page inside a page. But because they load an entire page, the by google provided javascript will also load.
Answer
So to finally answer your question...,
If you use fancybox by default (loading content inside an iframe) google analytics will already record the clicks on those pages.
If not you should check out the note below.
Note: This is how it works with the original Google Analytics tracking code. If you are using the new Asynchronous tracking you should really check out this page as it explains in detail how to hook custom events etc: http://code.google.com/intl/nl-NL/apis/analytics/docs/tracking/asyncUsageGuide.html

open custom Site Actions link in a new window (SharePoint)

When using custom actions in SharePoint (for the Site Actions menu) how can I make it so that the links will open up in a new window?
I have tried an approach using jQuery that would attach a hover event via .live() to replace the window.location with a window.open call -- however this proved to be troublesome as it refused to work in IE6 (which a large portion of our users are still using...).
Its is not possible out of box. But it can be done using little hack. Refer to these links
MSDN Question
Blog Post

Google Analytics executing in a dynamically created modal window

I am using JavaScript to create a modal window when a user either clicks a link or submits a form. The modal window holds either a form if they click a link or a thank you page when a user submits a sign up form. The modal window is populated using innerHTML.
The issue I am having is that these modal windows have Google Analytic tags in their source code. For some odd reason the Google Analytics is not executing. I have tried to place the actual ga.js source into the pages, that didn't work. I have put the Analytics code in two separate files but that is not working either.
Any one ever ran into this issue? Any help would be greatly appreciated.
Don’t add script tags using .innerHTML. Just fire pageTracker._trackPageview() directly from javascript, as it is described in the Google Analytics API

Categories

Resources