Graphed LogoGraphed
Graphed LogoGraphed
FeaturesUse CasesIntegrationsPricing

How to Add Google Analytics to Umbraco

Cody Schneider••8 min read

Adding Google Analytics to your Umbraco site is one of the first and most important steps to understanding your audience and website performance. This quick guide will walk you through a few different ways to get it set up, from a dead-simple copy-paste to a more flexible method preferred by developers. We’ll cover everything you need to start tracking your visitors and getting valuable insights.

Before You Start: Get Your GA4 Measurement ID

Before you touch your Umbraco site, you need the tracking script from Google Analytics. Universal Analytics (UA) has been discontinued, so we'll be exclusively using the newer Google Analytics 4. Instead of a "Tracking ID" like UA's "UA-XXXXX-Y," GA4 uses a "Measurement ID" that looks like "G-XXXXXXXXXX."

Here’s how to find it:

  1. Log into your Google Analytics account.
  2. If you don't have a GA4 property for your site, you'll need to create one first. Google provides a straightforward setup wizard to guide you.
  3. Navigate to the Admin section by clicking the gear icon in the bottom-left corner.
  4. In the Property column, click on Data Streams.
  5. Select the data stream for your website. This will open a panel with the stream details.
  6. In the top-right corner, you’ll see your Measurement ID (e.g., G-123ABC456D).
  7. Further down, under the "Google tag" section, click on View tag instructions.
  8. Make sure "Install manually" is selected. Here, Google gives you the complete JavaScript snippet you need. It will look 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>

Keep this code snippet handy. We're about to add it to Umbraco.

Method 1: Edit Your Master Template (The Quickest Way)

For most users, the simplest way to add the Google Analytics script is to place it directly into your site’s main or "master" template file. In Umbraco, templates often inherit from a master layout file, which ensures elements like the header and footer appear on every page. By adding the script here, you guarantee it loads for every page on your site.

Here are the steps:

1. Log into your Umbraco Backoffice

Access your site’s backoffice, typically at yourdomain.com/umbraco.

2. Navigate to the Settings Section

On the left-hand navigation bar, click on the "Settings" section. This is where your developer tools, templates, and document types are located.

3. Find Your Master Template

Under the "Templating" group, expand the "Templates" folder. You're looking for the root template that all other pages use. It is often named something like Master.cshtml, Root.cshtml, or Layout.cshtml. If you open a template for a regular page, you can see which master template it uses at the top of the file (e.g., Layout = "Master.cshtml").

4. Add the Google Analytics Script

Open the master template file. You will see the standard HTML structure (<html>, <head>, <body>). Google recommends placing the tracking script inside the <head> section of your HTML.

Scroll down until you find the closing </head> tag. Paste the entire Google Analytics code snippet you copied earlier on a new line just before this tag.

Your template code should look something like this:

...
    <!-- Other scripts and meta tags -->
    
    <!-- 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>
    
</head>
<body>
...

5. Save Your Template

Click the "Save" button in the top-right corner. That's it! Umbraco's template cache will be updated, and the Google Analytics script will now be injected into every page that uses this master template.

Method 2: Use a Partial View (A Cleaner Approach)

This method has the same result as the first but is considered a better practice for organizing your code. Instead of pasting the script directly into your master template, you put it in a separate, reusable file called a partial view. This keeps your master template tidy and makes the script easier to find and manage later.

1. Create a New Partial View

In the "Settings" section, find the "Templating" group. Right-click on "Partial Views" and select "Create". Choose "New empty partial view."

2. Name and Save the Partial View

Name the file something intuitive, like GoogleAnalyticsScript or GATracking. Click "Save."

3. Paste the Script

In the editor for your new partial view, paste the entire Google Analytics script. Save the partial view by clicking the "Save" button.

4. Render the Partial View in Your Master Template

Now, go back to your master template (as described in Method 1). Instead of pasting the multi-line script, you will insert a single line of Razor code to render your partial view. Place this line just before the closing </head> tag:

@Html.Partial("GoogleAnalyticsScript")

Make sure the name in the parentheses exactly matches the name you gave your partial view file. After adding this line, your master template should look like this:

...
    <!-- Other scripts and meta tags -->
    
    @Html.Partial("GoogleAnalyticsScript")
    
</head>
<body>
...

5. Save the Master Template

Save the changes to your master template. This approach is functionally identical to the first method but keeps your code neatly separated, which is a great habit for long-term site maintenance.

Method 3: Store Your Measurement ID in the CMS (The Most Flexible Way)

Hardcoding your Measurement ID directly in a template works, but it causes problems if you need to change it. You have to edit the code. It also makes it difficult to use a different ID for a development or staging environment versus your live site. The best practice is to store the ID in your Umbraco content tree so a content editor can change it without touching code.

1. Create a Setting on a Document Type

First, you need a place to store the ID. The ideal location is on a 'Site Settings' or 'Home' document type.

  • In "Settings," go to "Document Types" and select your root node (e.g., "Home").
  • Go to the "Tabs" menu and either add a new tab called "Settings" or use an existing one.
  • Click "Add property" in this tab.
  • Enter a name like "Google Analytics Measurement ID." The alias will likely auto-populate as googleAnalyticsMeasurementId.
  • For the editor, click "Select editor" and choose "Textstring."
  • Click "Submit," and then "Save" the document type.

2. Enter the ID in the Content Section

Now, go to the "Content" section of your Umbraco backoffice. Navigate to your homepage (or wherever you added the property) and go to the "Settings" tab. You'll see your new field. Paste your "G-XXXXXXXXXX" Measurement ID into this field and click "Save and publish."

3. Update Your Script to Use the Property

Finally, go back to the partial view (or master template) where your script lives. You need to modify it to dynamically pull the ID from the "Home" node.

Replace the hardcoded script with this Razor and JavaScript code:

@{
    var homePage = Model.Root(),
    var measurementId = homePage.Value<string>("googleAnalyticsMeasurementId"),
}

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

What this code does:

  • Model.Root() gets the top-level page of your content tree (your homepage).
  • .Value<string>("googleAnalyticsMeasurementId") reads the value from the field you created.
  • The @if statement checks if the ID actually exists. This prevents errors and ensures the script only renders if you’ve filled out the field in the CMS.
  • @measurementId injects your ID into the script in two places.

Save your partial view or template. Now your tracking is fully configured through the CMS!

How to Check If It’s Working

After implementing any of the methods above, you must verify that tracking is active. Here are a few ways to check:

  • View Page Source: Go to your live website in your browser, right-click, and choose "View Page Source." Search (Ctrl + F or Cmd + F) for "gtag" or your Measurement ID. If you see the script, it has been successfully added to your site's HTML.
  • Use Google Analytics Realtime Report: Log into your Google Analytics account and navigate to Reports > Realtime. With that report open, visit your own website in another browser tab. In about 30 seconds, you should see yourself appear as at least one active user.
  • Use Browser Developer Tools: In your browser, open the developer tools (usually by pressing F12) and go to the "Network" tab. Refresh your website page. In the filter box, type "google" and look for requests to addresses containing collect?v=2&... that are coming from google-analytics.com. Seeing these network requests confirms that data is being sent.

Final Thoughts

Getting Google Analytics data flowing from your Umbraco website is straightforward with any of these methods. Whether you choose the quick template edit or the more robust content-managed approach, you've now unlocked a trove of data that's essential for understanding traffic, user behavior, and how to grow your online presence.

Once you’re collecting data in Google Analytics, the next challenge is making sense of it, especially when you need to combine it with performance data from other platforms like your ad managers, CRM, or e-commerce store. That’s why we built Graphed to help. You can connect your Google Analytics account and other data sources in seconds, then simply ask questions in plain English - like "create a dashboard showing GA sessions, ad spend, and sales by campaign for last month" - and get instant dashboards and insights. It allows your whole team to skip the manual report-building and get straight to the answers.

Related Articles

How to Connect Facebook to Google Data Studio: The Complete Guide for 2026

Connecting Facebook Ads to Google Data Studio (now called Looker Studio) has become essential for digital marketers who want to create comprehensive, visually appealing reports that go beyond the basic analytics provided by Facebook's native Ads Manager. If you're struggling with fragmented reporting across multiple platforms or spending too much time manually exporting data, this guide will show you exactly how to streamline your Facebook advertising analytics.

Appsflyer vs Mixpanel​: Complete 2026 Comparison Guide

The difference between AppsFlyer and Mixpanel isn't just about features—it's about understanding two fundamentally different approaches to data that can make or break your growth strategy. One tracks how users find you, the other reveals what they do once they arrive. Most companies need insights from both worlds, but knowing where to start can save you months of implementation headaches and thousands in wasted budget.