JavaScript

Embed Analytics Using the Google Analtyics API

By Seth Stevenson

Google Analtyics gives so much data that sometimes it becomes hard to digest. For larger sites it is easy to become so overwhelmed that you can’t find the time to look up the analtyics for each page.

Or maybe you have many editors for a site who don’t have access to your Google Analtyics account and you want to provide them with data so they can see how well their pages are performing.

With the Google Analytics API we can easily display some basic analytics right in each page.  Google offers many libraries for exporting your data or you can use a community developed library like the GAPI PHP library created by Stig Manning which I’ll be using in this example.

The final result will be a nice graph and data that tells us some useful information about how well each page is performing:

Final result Google Charts with Google Analtyics

Starting off, pulling the data

Download the latest version of GAPI and extract it to a location in your site folder. Open your page template file and find where you want to place your analtyics and then include the class you just extracted:

require('gapi.class.php');

In order to connect to Google Analytics we have to supply login information and the profile id of the specific account profile we want to connect to. While we’re defining variables, let’s also define the page URL that we want to retrieve analytics for.

$ga_email = 'youremail@gmail.com';
$ga_password = 'yourpassword';
$ga_profile_id = '12345678';
$ga_url = $_SERVER['REQUEST_URI'];

I’m not a fan of hardcoding login information into my code, but this method prevents other users from needing login access to your account to retrieve the data.

To find the profile id in Google Analytics, go to the settings page of your profile (gear icon in top right) then click on the Profile Settings tab and you will see the profile id.

Google Analtyics Profile ID

Now let’s use the GAPI class to create a query and pull five metrics: pageviews, unique pageviews, exit rate, average time on page and the bounce rate. All of these metrics will be based upon the page we’re viewing. The GAPI documentation shows how to structure the query using the requestReportData() function:

requestReportData($report_id, $dimensions, $metrics, $sort_metric=null, $filter=null, $start_date=null, $end_date=null, $start_index=1, $max_results=30)

So here’s our query which we’ll save the results to the $results variable:

$ga = new gapi($ga_email,$ga_password);
$ga->requestReportData($ga_profile_id, 'pagePath', array('pageviews', 'uniquePageviews', 'exitRate', 'avgTimeOnPage', 'entranceBounceRate'), null, 'pagePath == '.$ga_url);
$results = $ga->getResults();

If no start and end date are given, GAPI will  return the results for the last 30 days by default.

Displaying the data

Before we display these results let’s create a function to convert seconds into minutes. This will be useful for displaying the average time on page, which by default returns the result in seconds.

function secondMinute($seconds) {
  $minResult = floor($seconds/60);
  if($minResult < 10){$minResult = 0 . $minResult;}
  $secResult = ($seconds/60 - $minResult)*60;
  if($secResult < 10){$secResult = 0 . round($secResult);}
  else { $secResult = round($secResult); }
  return $minResult.":".$secResult;
}

Now it’s just a matter of parsing through the results and displaying them however you want.

echo '<div id="page-analtyics">';
foreach($results as $result) {
  echo '<div><span>Pageviews</span><br /><strong>'.number_format($result->getPageviews()).'</strong></div>';
  echo '<div><span>Unique pageviews</span><br /><strong>'.number_format($result->getUniquepageviews()).'</strong></div>';
  echo '<div><span>Avg time on page</span><br /><strong>'.secondMinute($result->getAvgtimeonpage()).'</strong></div>';
  echo '<div><span>Bounce rate</span><br /><strong>'.round($result->getEntrancebouncerate(), 2).'%</strong></div>';
  echo '<div><span>Exit rate</span><br /><strong>'.round($result->getExitrate(), 2).'%</strong></div>';
  echo '<div style="clear: left;"></div>';
}
echo '</div>';

GAPI gives easy to use functions for pulling metrics like:

getPageviews() and getAvgtimeonpage()

Now we are going to want to add some CSS. Of course you can make up your own and customize it to blend in with your site.

<style type="text/css">
#page-analtyics {
  clear: left;
}
#page-analtyics .metric {
  background: #fefefe; /* Old browsers */
    background: -moz-linear-gradient(top, #fefefe 0%, #f2f3f2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f2f3f2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* IE10+ */
    background: linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f2f3f2',GradientType=0 ); /* IE6-9 */
  border: 1px solid #ccc;
  float: left;
  font-size: 12px;
  margin: -4px 0 1em -1px;
  padding: 10px;
  width: 105px;
}
#page-analtyics .metric:hover {
  background: #fff;
  border-bottom-color: #b1b1b1;
}
#page-analtyics .metric .legend {
  background-color: #058DC7;
  border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  font-size: 0;
  margin-right: 5px;
  padding: 10px 5px 0;
}
#page-analtyics .metric strong {
  font-size: 16px;
  font-weight: bold;
}
#page-analtyics .range {
  color: #686868;
  font-size: 11px;
  margin-bottom: 7px;
  width: 100%;
}
</style>

This is how things should look so far:

Analytics preview

Adding a chart

Most people who use Google Analytics are familiar with the big blue charts that display pageviews or visits. Using the Google Charts API in combination with the Google Analtyics API we can add a visually similar chart to our in page analytics that displays the number of pageviews over the last 30 days. I won’t breakdown the Charts API to a great amount of detail but if you want to learn more Google offers some excellent documentation for it.

Continuing from the example abov,e we can reuse the $ga and $ga_url variables to create a new GAPI request. However, instead of retrieving the total results over a span of time we need to get individual results for each day so we can feed this data to the chart. The trick to this is to setup the query to use both a dimension and filter of ‘date’. This will return the number of pageviews for every day in the last 30 days.

$ga->requestReportData($ga_profile_id, array('date'),array('pageviews'), 'date', 'pagePath == '.$ga_url);           
$results = $ga->getResults();

Next, setup a spot in your page template that will contain the chart, this will initially be an empty div that will later be modified by the Google Charts API.

<div id="chart"></div>

Include the Google Charts API

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

In this case we will use a bit of JavaScript to create a new chart populated by the data we retrieved. Load the Google Charts API and tell it to use a function we will create called drawChart().

<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart);

Now it’s time to create the function drawChart(). This function will start off by defining the columns of data that will be used in the chart. You can think of the columns as being each axis of a graph.

function drawChart() {   
  var data = new google.visualization.DataTable();       
  data.addColumn('string', 'Day');   
  data.addColumn('number', 'Pageviews');

Once the data structure for the chart is setup it can accept the data pulled from GAPI. Google Charts uses the function addRows() that can accept comma separated arrays of data.

Each of these arrays will contain one day and the number of pageviews for that day.

data.addRows([     
  <?php     
  foreach($results as $result) {         
    echo '["'.date('M j',strtotime($result->getDate())).'", '.$result->getPageviews().'],';     
  }
  ?>   
]);

Finally, create a chart and pass it the data we just set up. You will see there are several variables in this section which can be adjusted to fit your template such as width, height and title. The specific chart in use is the Google’s Area Chart in case you want to look up additional options.

  var chart = new google.visualization.AreaChart(document.getElementById('chart'));   
  chart.draw(data, {width: 630, height: 180, title: '<?php echo date('M j, Y',strtotime('-30 day')).' - '.date('M j, Y'); ?>',                     
    colors:['#058dc7','#e6f4fa'],                     
    areaOpacity: 0.1,                     
    hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#058dc7', fontSize: 10 } },                     
    pointSize: 5,                       
    legend: 'none',                     
    chartArea:{left:0,top:30,width:"100%",height:"100%"}   
  }); 
} // End of drawChart()
</script>

That’s it! You should now have a working chart. You can even hover your mouse over each point and it will tell you the exact number of pageviews for that day.

Analytics chart

Full example

Below, you can see what the code looks like when everything is put together. If you would like to see it in action, simply modify the email, password and Google id in the code below to match your individual credentials.

<style type="text/css">
/* IN PAGE ANALYTICS */
#page-analtyics {
    clear: left;
}
#page-analtyics .metric {
    background: #fefefe; /* Old browsers */
        background: -moz-linear-gradient(top, #fefefe 0%, #f2f3f2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f2f3f2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* IE10+ */
        background: linear-gradient(top, #fefefe 0%,#f2f3f2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f2f3f2',GradientType=0 ); /* IE6-9 */
    border: 1px solid #ccc;
    float: left;
    font-size: 12px;
    margin: -4px 0 1em -1px;
    padding: 10px;
    width: 105px;
}
#page-analtyics .metric:hover {
    background: #fff;
    border-bottom-color: #b1b1b1;
}
#page-analtyics .metric .legend {
    background-color: #058DC7;
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    font-size: 0;
    margin-right: 5px;
    padding: 10px 5px 0;
}
#page-analtyics .metric strong {
    font-size: 16px;
    font-weight: bold;
}
#page-analtyics .range {
    color: #686868;
    font-size: 11px;
    margin-bottom: 7px;
    width: 100%;
}
</style>
<?php
require('gapi.class.php');

/* Define variables */
$ga_email       = 'youremail@gmail.com';
$ga_password    = 'yourpassword';
$ga_profile_id  = '12345678';
$ga_url         = $_SERVER['REQUEST_URI'];

/* Create a new Google Analytics request and pull the results */
$ga = new gapi($ga_email,$ga_password);
$ga->requestReportData($ga_profile_id, array('date'),array('pageviews'), 'date', 'pagePath == '.$ga_url);    

$results = $ga->getResults();
?>   

<!-- Create an empty div that will be filled using the Google Charts API and the data pulled from Google -->
<div id="chart"></div>

<!-- Include the Google Charts API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- Create a new chart and plot the pageviews for each day -->
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();

    <!-- Create the data table -->
    data.addColumn('string', 'Day');
    data.addColumn('number', 'Pageviews');

    <!-- Fill the chart with the data pulled from Analtyics. Each row matches the order setup by the columns: day then pageviews -->
    data.addRows([
      <?php
      foreach($results as $result) {
          echo '["'.date('M j',strtotime($result->getDate())).'", '.$result->getPageviews().'],';
      }
      ?>
    ]);

    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data, {width: 630, height: 180, title: '<?php echo date('M j, Y',strtotime('-30 day')).' - '.date('M j, Y'); ?>',
                      colors:['#058dc7','#e6f4fa'],
                      areaOpacity: 0.1,
                      hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#058dc7', fontSize: 10 } },
                      pointSize: 5,
                      legend: 'none',
                      chartArea:{left:0,top:30,width:"100%",height:"100%"}
    });
  }
</script>

<?php
$ga->requestReportData($ga_profile_id, 'pagePath', array('pageviews', 'uniquePageviews', 'exitRate', 'avgTimeOnPage', 'entranceBounceRate'), null, 'pagePath == '.$ga_url);
$results = $ga->getResults();

function secondMinute($seconds) {
    $minResult = floor($seconds/60);
    if($minResult < 10){$minResult = 0 . $minResult;}
    $secResult = ($seconds/60 - $minResult)*60;
    if($secResult < 10){$secResult = 0 . round($secResult);}
    else { $secResult = round($secResult); }
    return $minResult.":".$secResult;
}
echo '<div id="page-analtyics">';
foreach($results as $result) {
    echo '<div class="metric"><span class="label">Pageviews</span><br /><strong>'.number_format($result->getPageviews()).'</strong></div>';
    echo '<div class="metric"><span class="label">Unique pageviews</span><br /><strong>'.number_format($result->getUniquepageviews()).'</strong></div>';
    echo '<div class="metric"><span class="label">Avg time on page</span><br /><strong>'.secondMinute($result->getAvgtimeonpage()).'</strong></div>';
    echo '<div class="metric"><span class="label">Bounce rate</span><br /><strong>'.round($result->getEntrancebouncerate(), 2).'%</strong></div>';
    echo '<div class="metric"><span class="label">Exit rate</span><br /><strong>'.round($result->getExitrate(), 2).'%</strong></div>';
    echo '<div style="clear: left;"></div>';
}
echo '</div>';
?>

Additional thoughts

  • Try using your CMS to only show these analytics based upon user roles. In WordPress you could use is_admin().
  • Consider seperating this code from your template. You could put it in a seperate file like show_analytics.php and then (in WordPress) use get_template_part(‘show_analytics’).
  • Adding the chart does add a decent amount of additional load time.

By Seth Stevenson
Seth is a web developer based in Des Moines, IA. He focuses on PHP, WordPress and UI. Seth is currently the web developer for Des Moines University. More articles by Seth Stevenson
Web Development

Why building a gift card option is essential for ecommerce

By Natalie Pavlovskaya
Gift cards possess huge potential for merchants who want to increase revenue, acquire new customers and get their brand noticed. It’s generally believed that a gift card program is a marketing tool perfect only for the biggest holiday season or that it can be applied merely by big brands. However, gift cards can be a great tool to drive customers and increase sales, regardless of the season or the brand size. According to the National Retail Federation 2014 survey, 60% (or 6 in 10) of shoppers say...
C#

A basic database SCRUD class using abstract and generic modifiers

By DeveloperDrive Staff
Introduction ... SCRUD is short for Select, Create, Read, Update and Delete. These are the general actions that any program will perform when working with databases. Yes, there are plenty of ORM applications ( http://en.wikipedia.org/wiki/Object-relational_mapping ) out there that can replace this, but as a general introduction to abstract or generic classes and general development I still think this is worth a read. I should also explain why I have used an abstract class instead of an interface....
DesignBombs

How to Create a Landing Page with Bootstrap 4

By DeveloperDrive Staff
Bootstrap 4 is currently the most popular front-end framework in the world. You can use it to build any kind of user interfaces, from admin templates to full-featured websites. In this step-by-step tutorial, we will have a look at how to build a responsive landing page with Bootstrap 4. You can even use it as a homepage or connect it to a specific marketing campaign. The landing page we will build will have five sections: a fixed navigation bar, a hero section, a three-column "Services" section, a full-width...
WordPress

How to build an auto-ranking Twitter list with WordPress

By James Montgomery
My team and I recently built an awesome list template on WordPress that ranks a set of Twitter users based on follower count. It allows a content writer to easily add a list of Twitter handles, and generate a well designed post. The first piece of content we created with it generated a 1,212% increase in traffic to our site. Check out the tutorial below if you're interested in building it as well. Requirements ... Input Twitter Handle (required) Name (optional) Tagline (optional) Image (optional) Bio...
DesignBombs

How to build your own theme for Grav CMS

By Angie Vella
Grav is an open source flat-file CMS platform, built by the RocketTheme Team. While there are plenty of great CMS platforms available, they are all mostly database-driven, which can be overkill for smaller websites. Instead of a database, Grav uses folders and a basic file structure, it is focused on speed, simplicity, and flexibility. After reading all of the documentation and spending some time trying Grav out, I’m definitely sold and will be using the platform. I hope you will too. What We’ll...
JavaScript

Developing With The HTML5 Element

By Scott Stanton
Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005.  But it wasn’t until the release of HTML5 that web developers have had a lightweight solution to playing the video.  In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.  This was one more thing that would weigh down your site, causing pages to load slower, and be one more thing you’d...
CSS

HTML5 and CSS3 Form Validation

By DeveloperDrive Staff
In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...
HTML

OAuth2 and the LinkedIn API – A WordPress CV/Résumé plugin

By DeveloperDrive Staff
Continuing on from last weeks introduction to OAuth 2.0 using the Twitter API, this week we're going to focus on an alternate implementation of OAuth 2.0 used in the LinkedIn API. This implementation requires that you manually authorize the application before you can get a token. This implementation is a more complex as it requires you to be re-directed to the authentication server, which then re-directs you back to your own site with the approved token. This allows LinkedIn to add additional permissions...
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress