How to Add Google Analytics in my project using Gridbox?

Ramakrishna Anand J

Posted in tutorials

If you're building a landing page then you need to integrate Google Analytics for tracking visitors, behavior, demographics, etc...

Why Google Analytics?

Google Analytics is a robust and powerful tool that provides indispensable information about your website visitors.

If you want to find out the following things in your Landing Page?

  1. Who your website’s visitors are
  2. What content they want to see from your business
  3. How they behave when browsing your site

Step 1 - Signup or Login to Google Analytics:

Go to https://analytics.google.com and login using your account.

Note: If you have a Google account, and are not signed in, click Sign in. If you do not have a Google account, click Create an account.

Step 2 - Step up a Google Analytics for Your Website:

Enter your account and website name, as well as the website’s URL. Be sure to also select your website’s industry category and the time zone you want the reporting to be in.

Once you do all that, accept the Terms and Services in order to get your tracking ID.

Step 3 - Get the tracking ID:

The tracking ID is a string of numbers that tells Google Analytics to send analytics data to you. It’s a number that looks like UA-000000-1. The first set of numbers (000000) is your personal account number and the second set (1) is the property number associated with your account.

This is unique to your website and your personal data—so don’t share the tracking ID with anyone publicly.

Once you have the tracking ID, it’s time to copy the script tag and paste them before the end of head tag or body tag.

For eg:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-35907209-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

Setting up Google Analytics in Gridbox

  1. Open the Code Editor by click on the </> - code icon in the left panel from the Gridbox Designer.
  2. Once the code editor loaded - You can see the default index.html page source code.
  3. Paste the Google Analytics code before the closing of head or body tag.
<!---Place Your Google Analytics Code Here --->
</head>
<body>
    ....
    ....

(OR)

<!---Place Your Google Analytics Code Here --->
</body>
</html>

--

Want to create & deploy your side projects faster?

Try (https://www.gridbox.io) and spread the word :)