How to Integrate Google Analytics on a Website in 2024: CMS and Custom Sites Guide

David KarimiDavid Karimi
4 min read

Table of contents

Integrating Google Analytics on your website is essential for tracking traffic and understanding user behavior. Whether you're using a CMS like WordPress, Shopify, Wix, or a custom-built site using JavaScript frameworks like React or Vue, this guide will walk you through the steps for a seamless integration.

Set Up Google Analytics Account

Sign Up for Google Analytics:

  • Go to Google Analytics and sign in with your Google account.

  • Click on "Start for free" to create new account.

  • Follow the prompts to set up your account and property. Enter your website's details and get your tracking ID.

Integrating Google Analytics with CMS Websites

WordPress

1. Using a

  • Install a Plugin: Go to your WordPress dashboard, navigate to Plugins > Add New, and search for "Google Analytics." Popular options include "MonsterInsights" and "Google Site Kit."

  • Activate the Plugin: Install and activate the plugin of your choice.

  • Connect to Google Analytics: Follow the plugin's instructions to connect your Google Analytics account.

2. Manually Adding the Tracking Code

  • Get Your Tracking Code: In your Google Analytics account, go to Admin > Tracking Info > Tracking Code. Copy the provided JavaScript code.

  • Add to Your Site's Header: In WordPress, go to Appearance > Theme Editor. Open the header.php file and paste the tracking code before the closing </head> tag. Save the changes.

Shopify

1. Using Shopify’s Built-In Integration:

  • Navigate to Preferences: In your Shopify admin, go to Online Store > Preferences.

  • Add Google Analytics: In the Google Analytics section, paste your tracking ID in the provided field. Shopify handles the rest of the integration automatically.

2. Using Google Tag Manager:

  • Set Up Google Tag Manager: Create a Google Tag Manager account if you don't have one.

  • Add Google Tag Manager to Shopify: In Shopify, go to Online Store > Themes > Actions > Edit Code. In the theme.liquid file, add the Google Tag Manager code snippet after the opening <body> tag.

  • Add Google Analytics Tag: In Google Tag Manager, create a new tag for Google Analytics and publish the changes.

Wix

1. Using Wix’s Built-In Integration:

  • Navigate to Tracking & Analytics: In your Wix dashboard, go to Settings > Tracking & Analytics.

  • Add Google Analytics: Click on “+ New Tool” and select “Google Analytics.” Paste your tracking ID and save.

2. Using Google Tag Manager:

  • Set Up Google Tag Manager: Create an account if you don’t have one.

  • Add Google Tag Manager to Wix: In the Tracking & Analytics section, add a custom tool and paste the Google Tag Manager code snippet.

  • Add Google Analytics Tag: In Google Tag Manager, create and configure a Google Analytics tag and publish the container.

Integrating Google Analytics with JavaScript Frameworks

React

Install React-GA Library:

Open your terminal and run npm install react-ga to install the Google Analytics library for React.

Initialize Google Analytics:

In your React project, import and initialize React-GA in your main application file (e.g., App.js or index.js):

import ReactGA from 'react-ga';
ReactGA.initialize('YOUR_TRACKING_ID');

Track Page Views:

Use React Router to track page views:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

Call usePageTracking:

Call usePageTracking in your main App component:

const App = () => {
  usePageTracking();
  return (
    // Your app code here
  );
};

Vue

Install Vue-GA Library:

Open your terminal and run npm install vue-analytics to install the Google Analytics library for Vue.

Initialize Google Analytics:

In your main main.js file, import and configure Vue-GA:

import Vue from 'vue';
import VueAnalytics from 'vue-analytics';

Vue.use(VueAnalytics, {
  id: 'YOUR_TRACKING_ID',
  router
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

Track Page Views:

Vue-GA automatically tracks page views when used with Vue Router. Ensure your router configuration is properly set up to allow tracking.

Conclusion

Integrating Google Analytics with your website, whether it's built on a CMS like WordPress, Shopify, Wix, or using JavaScript frameworks like React or Vue, is a critical step for monitoring and understanding your site's performance. By following the steps outlined in this guide, you can leverage the power of Google Analytics to gain valuable insights and make data-driven decisions to enhance your website's effectiveness. Regularly review your analytics data to continuously optimize your site and achieve your goals.

1
Subscribe to my newsletter

Read articles from David Karimi directly inside your inbox. Subscribe to the newsletter, and don't miss out.

GoogleGoogle Analyticsgoogle analytics 4websiteguidesitescms

Written by

David Karimi
David Karimi

I'm passionate about crafting web applications that push the boundaries of technology. Here, I delve into a wide array of tech topics, sharing insights on the latest trends and advancements in web development. You'll find bite-sized tutorials that span both front-end and back-end technologies, designed to fuel your curiosity and enhance your skills.