Introduction

Google Analytics is one of the most popular and widely used web analytics tools to track & report traffic on your website or app. Google Analytics provides you with a great dashboard showcasing plenty of insights and reports of usage done by users on your website or app.

 

Why use Google Analytics?

Google Analytics is a freemium service that most small and medium-sized businesses take advantage of.The standard or freemium version of Google Analytics usually provides great insights and  information which can be critical for monitoring website/app performance, tracking clicks/events, capturing geolocation of users and other actionable insights to successfully guide marketing efforts.

How to install Google Analytics on your website/app?

You will first need a Google account. If you already have a google account you don’t need to sign up again for google Analytics account. You can visit https://google.com/analytics and sign in with your existing account. After you login into Google Analytics, the next step is to generate a tracking id for your website or app on which you want to install Google Analytics. To generate a tracking id click on Create a New Account Button.

Fill in the above mentioned fields, and then click on the get tracking ID button. Copy the Tracking ID and script code under Tracking Code.

 

Now since you have copied the snippet, there are various methods to ingest this into your website or app. Let’s dive into some of the best ones:

Adding directly to your website code:

If you have access to your website code, you can open your website admin panel and paste the code before closing header tag (</head>) on each page.

Adding it via a plugin in WordPress:

If you are managing your website using WordPress, you can use plugins such as monsterinsights, exactmetrics to install the Google Analytics script to your website.

Adding it directly to the WordPress Theme:

WordPress Admins can directly add the script snippet into the header.php of WordPress Theme. All they have to do is edit the header.php file and add the snippet code after the <body> tag, then save the file and upload back it to the server.

Adding it via Functions.php file in WordPress:

<?php add_action(‘wp_head’, ‘add_ga_snippet’);

function add_ga_snippet(){?>

 // Add Google Analytics script snippet here

 <?php }?>

Once you add the above code to the functions.php file and save it, it will automatically install Google Analytics code to all pages of your website.

 Adding it via Google Tag Manager:

Google Tag Manager is another freemium service provided by Google which will help you to not only install many tags or snippets into your website but also helps you manage multiple such tags without editing your site code.

For GTM, visit https://tagmanager.google.com then click on the New Tag button and name the tag as GA-snippet (You can name it according to your choice).

Under Tag Configuration >> Choose Tag Type >> Select Google Analytics: Universal Analytics

Now set the Track Type as Page View, check the checkbox for Enable overriding settings in this tag and under Tag firing priority add the Google Analytics ID or Tracking ID.

Under Trigger, set Firing Triggers to All Pages, since we want to fire the tag to all pages.

Click on Save and your tag is ready to go live.

Hit Preview on the next screen to make sure the tag is getting fired correctly and push the changes by hitting Submit and Publish if it looks good.

Adding GA snippet to React based app or website:

Once you have the GA Tracking ID, we need to configure the React Project.

First we need to install the react-ga package using the following command.

npm install react-ga –save 

With Bower :-

bower install react-ga –save

For initializing Google Analytics and Tracking Pageviews add the following code to Index.js file.

import ReactGA from ‘react-ga’;

ReactGA.initialize(‘Your Google Analytics ID or Tracking ID’);

ReactGA.pageview(window.location.pathname + window.location.search);

With Bower :-

<script>

             ReactGA.initialize(‘Your Google Analytics ID or Tracking ID’, { debug: true });

</script>

Deploy the changes and we are good to go.

 Adding GA snippet to Vue based app or website:

There are various npm packages available that will make your job easier to add Google Analytics to your website. Vue-analytics is one such package available which is a wrapper of  the Google Analytics API. Simply use the following command to install it.

npm i -S vue-analytics

Once you have installed the vue-analytics package, you need to add it to your vue application in our main.js using the following code:

import Vue from ‘vue’

import VueAnalytics from ‘vue-analytics’

Vue.use(VueAnalytics, {

            id: ‘Your Google Analytics ID or Tracking ID’

})

Once you have installed Google Analytics on your website or application, you can see the live data under the Realtime section.

 

You can see Page Views, Geo location data, Traffic sources, Content, Events (button clicks or action performed by users) & Conversions based on Goals you set.

Audience View will give you a Dashboard view of the data collected so far. In the overview section you can apply a date filter and also group by combining different attributes that are useful to your business.

To find more help information on Google Analytics visit the following URL :- https://support.google.com/analytics/#topic=10094551

In our next blog in this series we will see how we can track events and clicks using Google Analytics & Google Tag Manager. Do check out our other blogs here.