Web Technologies that make Entrepreneur

how to Embed Google Analytic Analysis Result into Website

0 1,107

Google Analytic

Embed Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic. Google launched the service in November 2005 after acquiring Urchin. Google Analytics is now the most widely used web analytics services on the Internet.

3 steps to adding analytics to website

1. Add all this files into html head section

don’t change this script. this script is comman for all sites.

<!--Google Analytics-->
 <script>
 (function(w,d,s,g,js,fs){
 g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
 js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
 js.src='https://apis.google.com/js/platform.js';
 fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
 }(window,document,'script'));
 </script>
 
 <!-- Scripts for google analytics --> 
 <script src="plugins/google analytics/Chart.min.js"></script>
 <script src="plugins/google analytics/moment.min.js"></script>
 <script src="plugins/google analytics/view-selector2.js"></script>
 <script src="plugins/google analytics/date-range-selector.js"></script>
 <script src="plugins/google analytics/active-users.js"></script>
 
 <link rel="stylesheet" href="plugins/google analytics/chartjs-visualizations.css">

2. add this code to your HTML body section

<section class="content-header">
 
 <h1>Google analytics report</h1>
 
 <header>
 <div id="embed-api-auth-container"></div>
 <div class="row">
 <div class=" col-sm-12">
 <div id="view-selector-container"></div>
 </div>
 </div>
 <div id="view-name" style="display:none;"></div>
 </br>
 <div class="row">
 <div class=" col-sm-12">
 <div class=" col-sm-4" style="float:right;">
 <div id="active-users-container"></div>
 </div>
 </div>
 </div>
 </header>
 </br>
<div class="row">
 <div class="col-md-12">
 <div class="row">
 <div class="col-md-12">
 <div class="col-md-6">
 <div class="box box-primary">
 <div class="box-header with-border">
 <h3 class="box-title">This Week vs Last Week (by sessions)</h3>
 </div>
 <div class="Chartjs">
 <div class="box-body">
 <figure class="Chartjs-figure" id="chart-1-container"></figure>
 <ol class="Chartjs-legend" id="legend-1-container"></ol>
 </div>
 </div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="box box-primary">
 <div class="box-header with-border">
 <h3 class="box-title">This Year vs Last Year (by users)</h3>
 </div>
 <div class="Chartjs">
 <div class="box-body">
 <figure class="Chartjs-figure" id="chart-2-container"></figure>
 <ol class="Chartjs-legend" id="legend-2-container"></ol>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 
 <div class="col-md-6">
 <div class="box box-primary">
 <div class="box-header with-border">
 <h3 class="box-title">Top Browsers (by pageview)</h3>
 </div>
 <div class="Chartjs">
 <div class="box-body">
 <figure class="Chartjs-figure" id="chart-3-container"></figure>
 <ol class="Chartjs-legend" id="legend-3-container"></ol>
 </div>
 </div>
 </div>
 </div>
 
 <div class="col-md-6">
 <div class="box box-primary">
 <div class="box-header with-border">
 <h3 class="box-title">Top Countries (by sessions)</h3>
 </div>
 <div class="Chartjs">
 <div class="box-body">
 <figure class="Chartjs-figure" id="chart-4-container"></figure>
 <ol class="Chartjs-legend" id="legend-4-container"></ol>
 </div>
 </div>
 </div>
 <div></div>
</div>

<div class="row">
 <div class="col-md-12">
 <div class="box box-primary">
 <div class="box-header with-border">
 <h3 class="box-title">Sessions(last 30 days)</h3>
 </div>
 <div class="box-body">
 <div id="chart-container"></div>
 </div>
 </div>
 </div>
</div>
 
 </div>
</div>

</section>

 

3. Add This script below html body code

<script src="plugins/google analytics/main.js"></script>

in the main.js file replace client id with your client id in line no. 16

it will show charts with default styles.want to give style for charts add style in their classes.

 

how to Embed Google Analytic Analysis Result into Website
Rate this post
Subscribe to our newsletter
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More