Ora

How do I manually install Google Analytics?

Published in Web Analytics Setup 4 mins read

Manually installing Google Analytics involves directly embedding the Google tag code into your website's HTML, giving you precise control over its placement.

What is Manual Google Analytics Installation?

Manual installation of Google Analytics refers to the process of adding the Google tag (Gtag.js) directly into the HTML code of every page on your website. This method is often chosen when a website builder or Content Management System (CMS) plugin for Google Analytics isn't available or when you need a custom implementation for advanced tracking.

Step-by-Step Guide to Manually Install Google Analytics

Follow these steps to successfully embed the Google Analytics tracking code onto your website:

1. Access Your Google Tag

Before you can install the code, you need to retrieve it from your Google Analytics account:

  • Navigate to Admin: In your Google Analytics interface, click on "Admin."

  • Find Data Streams: Under "Data collection and modification," click on "Data streams."

  • Select Your Web Stream: Choose "Web," and then click on the specific data stream associated with your website.

  • View Tag Instructions: Under "Google tag," click "View tag instructions."

  • Choose Manual Installation: On the "Installation instructions" page, select "Install manually." This will display your unique Google tag code. Copy this entire code snippet. It typically looks like this:

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

    (Note: 'G-XXXXXXXXXX' will be your unique Measurement ID.)

2. Locate Your Website's Code

You will need access to your website's core files, typically via an FTP client, a hosting control panel (like cPanel), or your CMS's theme editor. The goal is to find the HTML template files that control the header section of your website.

  • For Static HTML Sites: Open each HTML file (index.html, about.html, etc.) in a text editor.
  • For CMS (e.g., WordPress, Shopify, Squarespace):
    • WordPress: Navigate to Appearance > Theme File Editor (or Theme Editor) in your WordPress dashboard. Look for header.php.
    • Shopify: Go to Online Store > Themes > Actions > Edit code. Find theme.liquid.
    • Other CMS: Look for options to edit theme files or inject code into the header.

3. Insert the Google Tag

The Google tag should be placed at the very top of the <head> section of every page you want to track. It's crucial to place it as high as possible, before any other scripts or CSS files, to ensure it fires correctly and captures all user interactions.

  • Find the <head> tag: In your website's HTML file(s), locate the opening <head> tag.

  • Paste the code: Paste the entire Google tag code snippet you copied in Step 1 immediately after the <head> tag.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
    <!-- Other header elements like title, meta tags, CSS links, etc. -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- Your website content -->
    </body>
    </html>
  • Save your changes: After pasting the code, save the modified file(s). If you're using an FTP client, upload the updated file(s) back to your server.

4. Verify Your Installation

After installing the tag, it's essential to verify that it's working correctly and sending data to your Google Analytics property.

  • Google Analytics Realtime Report:
    1. Open your Google Analytics 4 property.
    2. Navigate to "Reports" > "Realtime."
    3. Open your website in a new browser tab or window.
    4. You should start seeing active users on your site appear in the Realtime report within seconds. This confirms the tag is firing.
  • Google Tag Assistant:
    1. Install the Google Tag Assistant Chrome extension.
    2. Browse to your website.
    3. Click on the Tag Assistant icon in your browser.
    4. It should detect your Google tag and show it as successfully implemented.
  • Developer Tools (Browser Console):
    1. Open your website in Chrome (or another browser).
    2. Right-click anywhere on the page and select "Inspect" (or "Inspect Element").
    3. Go to the "Network" tab.
    4. Filter by "collect" or "google-analytics."
    5. Reload the page. You should see requests being sent to Google Analytics.

Best Practices for Manual Installation

  • Consistency: Ensure the Google tag is present on every page you wish to track. If your site has a common header file (like header.php in WordPress), placing it there will cover all pages automatically.
  • Placement: Always place the tag immediately after the opening <head> tag for optimal performance and data accuracy.
  • Testing: Always test your installation thoroughly in a staging environment before deploying to your live website.
  • Caching: If your website uses caching, clear your website's cache after installing the tag to ensure the new code is served to visitors.
  • Version Control: If you manage your website code with version control (e.g., Git), commit your changes after adding the tag.

By carefully following these steps, you can successfully manually install Google Analytics and begin gathering valuable data about your website's performance and user behavior.