Validate Your Gantry Template to Support Google Analytic Demographics

Posted on by

So you have a Gantry template but it doesn’t support Google Analytic demographic tracking?  Give us a call or comment below if you need some help. Here is how to validate your Joomla! Gantry template so you can start tracking demographics on your site.

1. Login to your Google Analytics account and click on the Reporting tab.

Here are the instructions from Google.

To implement Display Advertising features for Universal Analytics, insert the bold line into your existing tracking code between the 'create' and 'send' commands, as seen in this example:


(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-XXXXXX-XX', 'example.com');
ga('require', 'displayfeatures');
ga('send', 'pageview');

2. The code you need to add: ga(‘require’, ‘displayfeatures’);
3. Now we need to insert this line of code into our template.
4. FTP to your site root or you can use Extplorer to get access to your site root.
5. If you are using Gantry and a Gantry enabled template you will need to go to the folder /libraries/gantry/features/analytics.php
6. Open up analytics.php

You will see the following code:

gantry_import('core.gantryfeature');

/**
* @package gantry
* @subpackage features
*/
class GantryFeatureAnalytics extends GantryFeature
{

var $_feature_name = ‘analytics’;

function init()
{
/** @var $gantry Gantry */
global $gantry;

ob_start();
// start of Google Analytics 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’,’__gaTracker’);
__gaTracker(‘create’, ‘<?php echo $this->get(‘code’); ?>’, ‘auto’);
__gaTracker(‘send’, ‘pageview’);
<?php
// end of Google Analytics javascript
$gantry->addInlineScript(ob_get_clean());
}
}

7. I found that the default gantry code above needs to be replaced with the code provided by Google for demographic tracking to work properly. Replace the the JavaScript in Gantry with the following:

 

(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’, ‘<?php echo $this->get(‘code’); ?>’, ‘auto’);
ga(‘require’, ‘displayfeatures’);
ga(‘send’, ‘pageview’);

Now insert the snippet: ga(‘require’, ‘displayfeatures’); between ga(‘require’, ‘displayfeatures’);
ga(‘send’, ‘pageview’); The resulting code should look like this with the new piece of code in bold:

gantry_import('core.gantryfeature');

/**
 * @package     gantry
 * @subpackage  features
 */
class GantryFeatureAnalytics extends GantryFeature
{

	var $_feature_name = 'analytics';

	function init()
	{
		/** @var $gantry Gantry */
		global $gantry;

		ob_start();
		// start of Google Analytics 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', '', 'auto');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');

	9. That's it. You should now be able to see demographic reports for your site in your analytic account. Give it a few hours before you start noticing any tracking.