Steps for implementing AJAX call tracking with Google Analytics

Question

Steps for implementing AJAX call tracking with Google Analytics

After setting up my Google Analytics account and adding the provided code to my index.php file, I noticed calls to www.google-analytics.com in Firebug. It seems like everything is working correctly.

Now, I want to track how many times the 'functions.php' file is called through AJAX from the index file.

I attempted to use

_gaq.push(['_trackPageview', 'functions.php']);

but encountered an error stating

Uncaught ReferenceError: _gaq is not defined

. To address this, I included var _gaq = _gaq || []; in my code, which resolved the error. However, I am now unable to see any requests to www.google-analytics.com after the AJAX request completes.

If anyone could assist me in configuring analytics to track AJAX calls, I would greatly appreciate it.

This is how my code appears:

<script type='text/javascript'>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-1234556-1', 'domain.com');
            ga('send', 'pageview');

         var _gaq = _gaq || [];

        function submit_data(){

                var text_area=$('#textarea').val();
                var url ="functions.php";
                jQuery.ajax({
                    type: "get",
                    dataType: "text",
                    url: url,
                    data: {
                        what : "generate",
                        text_area: text_area,
                        t: Math.random()
                    },
                        success: function(data, textStatus){
                        $('#textarea').val(data);
//                      _gaq.push(['_setAccount', 'UA-12345-1']);
                        _gaq.push(['_trackPageview', 'functions.php']);
                        }
                });
        }

        </script>

javascript ajax google-analytics

Answer 1

Answer №1

In Google Analytics, make sure to select "Universal Analytics" during check-in as it utilizes a new code counter. Check the browser DOM for the absence of the "_gaq" object, as this indicates an error. Attempting to resolve this by creating an empty array (_gaq) will not work.
Here is the old code:

var _gaq = _gaq | | [];
_gaq.push (['_setAccount', 'UA-XXXXXX-1']);

Avoid using the old code! Also, do not use multiple code counters like 'UA-XXXXXX-1' - that's a mistake)
Here is the updated code:

ga ('create', 'UA-XXXXXXX-1', 'mysite.com');
ga ('send', 'pageview');

The new Google Analytics counter comes with a new syntax.
Refer to the documentation for event usage: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
Example of implementation:
Imagine having a calculator on your page and wanting to track events triggered by button clicks on it.
Category - "Using the Calculator";
Event - "Calculating the cost".
Old code:

_gaq.push(['_trackEvent', 'Using the Calculator', 'Calculating the cost');

New code:

ga('send', 'event', 'Using the Calculator', 'Calculating the cost');

Ensure Category and Event are specified!
P.S.: Apologies for any language barriers; I relied on Google Translate for assistance :)

Update:

<script type='text/javascript'>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
//Include once per page
        ga('create', 'UA-1234556-1', 'domain.com');
        ga('send', 'pageview');
        //
        function submit_data(){

                var text_area=$('#textarea').val();
                var url ="functions.php";
                jQuery.ajax({
                    type: "get",
                    dataType: "text",
                    url: url,
                    data: {
                        what : "generate",
                        text_area: text_area,
                        t: Math.random()
                    },
                        success: function(data, textStatus){
                        $('#textarea').val(data);
                        ga('send', 'event', 'MyCategory', 'functions.php');
                        }
                });
        }

</script>

Answer 2

In Google Analytics, make sure to select "Universal Analytics" during check-in as it utilizes a new code counter. Check the browser DOM for the absence of the "_gaq" object, as this indicates an error. Attempting to resolve this by creating an empty array (_gaq) will not work.
Here is the old code:

var _gaq = _gaq | | [];
_gaq.push (['_setAccount', 'UA-XXXXXX-1']);

Avoid using the old code! Also, do not use multiple code counters like 'UA-XXXXXX-1' - that's a mistake)
Here is the updated code:

ga ('create', 'UA-XXXXXXX-1', 'mysite.com');
ga ('send', 'pageview');

The new Google Analytics counter comes with a new syntax.
Refer to the documentation for event usage: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
Example of implementation:
Imagine having a calculator on your page and wanting to track events triggered by button clicks on it.
Category - "Using the Calculator";
Event - "Calculating the cost".
Old code:

_gaq.push(['_trackEvent', 'Using the Calculator', 'Calculating the cost');

New code:

ga('send', 'event', 'Using the Calculator', 'Calculating the cost');

Ensure Category and Event are specified!
P.S.: Apologies for any language barriers; I relied on Google Translate for assistance :)

Update:

<script type='text/javascript'>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
//Include once per page
        ga('create', 'UA-1234556-1', 'domain.com');
        ga('send', 'pageview');
        //
        function submit_data(){

                var text_area=$('#textarea').val();
                var url ="functions.php";
                jQuery.ajax({
                    type: "get",
                    dataType: "text",
                    url: url,
                    data: {
                        what : "generate",
                        text_area: text_area,
                        t: Math.random()
                    },
                        success: function(data, textStatus){
                        $('#textarea').val(data);
                        ga('send', 'event', 'MyCategory', 'functions.php');
                        }
                });
        }

</script>

Answer 3

Answer №2

When working with Universal Analytics (analytics.js), make sure to replace the following:

_gaq.push(['_trackPageview', 'functions.php']);

with this:

ga('send', 'pageview', 'functions.php');

Answer 4

When working with Universal Analytics (analytics.js), make sure to replace the following:

_gaq.push(['_trackPageview', 'functions.php']);

with this:

ga('send', 'pageview', 'functions.php');

Answer 5

Answer №3

It appears that there is a mix of Universal Analytics (analytics.js and ga() calls) with Async Analytics (ga.js and _gaq.push()), however, the code to initialize ga.js is missing.

To correct this, update the code as follows

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); 
  ga.type = 'text/javascript'; 
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(ga, s);
})();

Answer 6

It appears that there is a mix of Universal Analytics (analytics.js and ga() calls) with Async Analytics (ga.js and _gaq.push()), however, the code to initialize ga.js is missing.

To correct this, update the code as follows

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); 
  ga.type = 'text/javascript'; 
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(ga, s);
})();

Answer 7

Answer №4

A simple solution is to include the following code snippet right after your Google Analytics script in order to establish the _gaq array:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-98765-4']);
_gaq.push(['_trackPageview']);

Answer 8

A simple solution is to include the following code snippet right after your Google Analytics script in order to establish the _gaq array:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-98765-4']);
_gaq.push(['_trackPageview']);

Steps for implementing AJAX call tracking with Google Analytics

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Encountering an error with requireJS: "Unknown provider $routeProvider with AngularJS 1.2.9 ngRoute"

Installing different versions of a package in npm can be done by loading multiple versions

incorrect path in post request

While looping through a JSON object and converting it to a string, the script is causing

Removing the root component in ReactJS can be done on specific pages by implementing

Issue arising from the lack of direct communication between parent and child elements

The art of building websites and applications for the

How to make a div slide up using jQuery without obstructing text

Issue with jQuery, Ajax, and Haml as js.erb files are not triggering

Updating DOM element value from controller in AngularJs following an AJAX request

Angular 2 Element Selection: Dealing with Unrendered Elements

What is the best method for updating a PHP variable in a SQL query?

Tips for displaying a category name only once if it has already been rendered in a map function

The ValidationMessageFor() in MVC 3 is not showing up as expected

Simultaneously opening the second submenu and closing the previous submenu with a height transition results in the second submenu being positioned off-screen

What is the best way to retrieve an object from the state in my React application?

Ways to customize the design of a bootstrap button using jQuery

Tips for transferring an id from an HTML form to Node.js and MySQL

Tips on how to hold off the display of webpage content until all elements, including scripts and styles, have fully loaded

Switch up the current Slick Carousel display by utilizing a div element