How to Set Up Google Analytics 4 (GA4) with Google Tag Manager (GTM) on Your WordPress Site

As an expert educator in the digital landscape, I frequently encounter WordPress users seeking to understand their website’s performance. While Google Analytics 4 (GA4) offers powerful insights into user behavior, integrating it correctly can seem daunting. This tutorial will guide you through the precise, step-by-step process of setting up GA4 on your WordPress site using Google Tag Manager (GTM). This method provides flexibility, simplifies future tag management, and ensures accurate data collection.

Why GA4 and GTM Together?

• Google Analytics 4 (GA4): This is Google’s latest generation of analytics, designed for the future of measurement. It’s event-driven, focuses on user journeys across devices, and offers machine learning-powered insights. It officially replaced Universal Analytics (GA3) in July 2023, making its implementation crucial for any serious website owner.
• Google Tag Manager (GTM): GTM is a free tool that allows you to manage and deploy marketing tags (like tracking pixels, analytics snippets, etc.) on your website without editing code. Instead of directly embedding GA4 code into your WordPress theme, GTM acts as a central hub. This means:
• Simplified Management: All your tracking codes are in one place.
• Increased Flexibility: You can easily add, remove, or modify tags without touching your website’s backend code.
• Faster Deployment: Make changes to your tracking instantly, without relying on developers.
• Improved Page Load: GTM loads asynchronously, often leading to better page performance compared to multiple hard-coded scripts.
• Enhanced Testing: GTM’s preview and debug mode allows you to test tags before publishing them live, preventing data errors.

By combining GA4 with GTM, you gain a robust and future-proof analytics setup for your WordPress site.

Prerequisites:

Before we dive in, ensure you have the following:

• An Active WordPress Website: You need administrator access to install plugins and potentially edit theme files (though we’ll use a safer plugin method).
• A Google Account: This is essential for creating and accessing Google Analytics and Google Tag Manager.

Step 1: Create a Google Analytics 4 (GA4) Property

If you already have a GA4 property for your website, you can skip to Step 1.4 to retrieve your Measurement ID.

1. Navigate to Google Analytics:

• Go to analytics.google.com and sign in with your Google account.

1. Access the Admin Panel:

• In the bottom left corner, click the Admin gear icon (⚙️).

1. Create a New Property:

• In the “Property” column, click Create Property.
• Property Details:
• Property name: Enter a descriptive name for your website (e.g., “Your Website Name GA4”).
• Reporting time zone: Select your local time zone.
• Currency: Select your local currency.
• Click Next.
• Business Information: Provide details about your industry and business size. This helps Google customize your reporting experience. Click Create.

1. Set Up a Data Stream:

• After creating the property, you’ll be prompted to “Choose a platform.” Select Web.
• Web stream setup:
• Website URL: Enter your website’s full URL (e.g., ZEALTERCODE0). Make sure to select the correct ZEALTERCODE1 or ZEALTERCODE2 prefix.
• Stream name: Enter a descriptive name (e.g., “Your Website Name Web Stream”).
• Ensure Enhanced measurement is enabled (it usually is by default). This automatically tracks common events like page views, scrolls, outbound clicks, and site search.
• Click Create stream.

1. Locate Your Measurement ID:

• Once the stream is created, you’ll see its details. Your Measurement ID (it starts with ZEALTERCODE0 followed by a string of characters, e.g., ZEALTERCODE1) will be prominently displayed at the top.
• Copy this Measurement ID. You will need it in a later step. Keep this browser tab open or save the ID somewhere accessible.

Tip: If you ever lose this ID, you can find it again by going to Admin > Data Streams > [Your Web Stream Name].

Step 2: Set Up Google Tag Manager (GTM) Account and Container

If you already have a GTM account and container for your website, you can skip to Step 2.5 to retrieve your container code.

1. Navigate to Google Tag Manager:

• Go to tagmanager.google.com and sign in with your Google account.

1. Create a New Account:

• If this is your first time using GTM, click Create Account.
• Account Setup:
• Account Name: Enter your company or personal name (e.g., “My Business Name”).
• Country: Select your country.
• Container Setup:
• Container Name: Enter your website’s domain (e.g., ZEALTERCODE0). This clearly links the container to your site.
• Target Platform: Select Web.
• Click Create.

1. Accept the Terms of Service:

• Review the Google Tag Manager Terms of Service Agreement and click Yes to accept.

1. Retrieve Your GTM Container Code:

• Immediately after creating your container, a popup titled “Install Google Tag Manager” will appear, displaying two code snippets. These are your GTM container codes.
• Snippet 1 (Head Code): This code should be placed as high as possible in the ZEALTERCODE0 section of every page on your website.
• Snippet 2 (Body Code): This code should be placed immediately after the opening ZEALTERCODE0 tag on every page of your website.
• Keep this popup open or copy both snippets to a text editor. You’ll need them for the next step.

Tip: If you accidentally close the popup, you can always retrieve these codes by clicking on your GTM container ID (e.g., ZEALTERCODE0) in the top right corner of your GTM workspace.

Step 3: Add the Google Tag Manager Container to WordPress

This is the crucial step where you integrate GTM with your WordPress site. We will use a plugin, which is the recommended and safest method.

1. Install a Code Snippet Plugin:

• Log in to your WordPress admin dashboard.
• Navigate to Plugins > Add New.
• In the search bar, type “WPCode Lite” (formerly “Insert Headers and Footers”) or “Header Footer Code Manager”. We’ll proceed with WPCode Lite as it’s a popular and robust choice.
• Find “WPCode Lite – Insert Headers and Footers, Custom Code Snippets, and PHP” (or a similar highly-rated plugin).
• Click Install Now, then Activate.

1. Add the GTM Head Code:

• Once activated, you’ll find a new menu item, usually named Code Snippets or WPCode, in your WordPress dashboard sidebar. Click on it.
• Go to Code Snippets > Header & Footer.
• Locate the “Header” section.
• Paste the first GTM code snippet (the ZEALTERCODE0 code you copied in Step 2.4) into the “Header” box.
• Important: Ensure there are no extra spaces or characters around the code you paste.

1. Add the GTM Body Code:

• Scroll down on the same “Header & Footer” page.
• Locate the “Body” section or the option for “Body Tracking.”
• Paste the second GTM code snippet (the ZEALTERCODE0 code you copied in Step 2.4) into the “Body” box or immediately after the opening body tag option.
• If the plugin offers a “Body” or “Footer” section but explicitly states “before ZEALTERCODE0“, place it there. The key is it should be as early as possible after the opening ZEALTERCODE1 tag.

1. Save Your Changes:

• Click the Save Changes button.

Tip (Advanced Alternative – Child Theme): For advanced users or developers, an alternative is to manually insert the GTM codes into your WordPress theme files. This should only be done using a child theme to prevent your changes from being overwritten during theme updates. You would typically place the ZEALTERCODE0 code in your child theme’s ZEALTERCODE1 file, immediately after the ZEALTERCODE2 tag, and the ZEALTERCODE3 code immediately after the ZEALTERCODE4 tag. However, for most users, the plugin method is safer, easier, and highly recommended.

Step 4: Create a GA4 Configuration Tag in Google Tag Manager

Now that GTM is on your WordPress site, we need to tell GTM to load GA4.

1. Go Back to Google Tag Manager:

• Return to your GTM workspace (tagmanager.google.com).

1. Create a New Tag:

• In the left sidebar, click Tags.
• Click the New button.

1. Configure Your Tag:

• Tag Name: Give your tag a clear, descriptive name (e.g., “GA4 – Configuration Tag” or “GA4 Base Code”).
• Tag Configuration: Click anywhere in the “Tag Configuration” box.
• In the “Choose Tag Type” sidebar, select Google Analytics: GA4 Configuration.

1. Enter GA4 Measurement ID:

• In the “Tag Configuration” settings:
• Measurement ID: Paste the GA4 Measurement ID (the ZEALTERCODE0 you copied in Step 1.5).
• Leave “Send a page view event when this configuration loads” checked. This ensures a page view is sent every time a page loads.

1. Configure Triggering:

• Click anywhere in the “Triggering” box.
• In the “Choose a trigger” sidebar, select All Pages (Page View). This tells GTM to fire your GA4 configuration tag on every page load.

1. Save Your Tag:

• Click the blue Save button in the top right corner.

Tip: The GA4 Configuration tag is essentially the “base” for all other GA4 tracking. Any other GA4 event tags you create (e.g., form submissions, video plays) will typically reference this configuration tag.

Step 5: Test Your GA4 Implementation

Before publishing, it’s crucial to verify that your GA4 tag is firing correctly and sending data to Analytics.

1. Use GTM Preview Mode:

• In your GTM workspace, click the Preview button (top right corner).
• A new browser tab will open for Tag Assistant. Enter your WordPress website’s URL (e.g., ZEALTERCODE0) into the “Your website’s URL” field and click Connect.
• Your website will open in a new window, and the Tag Assistant tab will show debugging information.
• Verify Tag Firing: In the Tag Assistant tab, look at the “Tags Fired” section. You should see your “GA4 – Configuration Tag” listed under “Tags Fired” for each page view.
• Navigate Your Site: Click around your WordPress site in the connected window (visit different pages, click some links). Observe the Tag Assistant tab – you should see new events and your GA4 tag firing on each new page view.

1. Check GA4 Realtime Report:

• Open your Google Analytics 4 property (analytics.google.com) in a separate browser tab.
• In the left sidebar, navigate to Reports > Realtime.
• In the Realtime report, you should see data from your active users (which should include you, as you’re browsing your site in preview mode). Look for “eventname” of ZEALTERCODE_0.
• You should see your geographic location, the pages you’re viewing, and other real-time data indicating that GA4 is receiving information.

Troubleshooting Tips:

• No Tag Firing in GTM Preview:
• Double-check that you’ve correctly placed both GTM code snippets in your WordPress site (Step 3). Clear any website caching plugins.
• Ensure your GTM container is correctly set up for “Web.”
• Verify the GTM codes match what’s shown in your GTM interface.
• No Data in GA4 Realtime:
• Ensure the Measurement ID in your GA4 Configuration Tag in GTM (Step 4.4) exactly matches the Measurement ID from your GA4 property (Step 1.5).
• Clear your browser cache and your WordPress site cache.
• Wait a few minutes. Sometimes it takes a moment for data to populate.
• If using browser extensions that block trackers, temporarily disable them.

Step 6: Publish Your Google Tag Manager Container

Once you’ve successfully tested your GA4 implementation and are confident it’s working, it’s time to publish your changes.

1. Return to GTM Workspace:

• Go back to your Google Tag Manager workspace.

1. Submit Your Changes:

• Click the blue Submit button in the top right corner.

1. Add Version Details:

• Version Name: Enter a descriptive name for this version (e.g., “GA4 Initial Setup”).
• Version Description: Briefly explain the changes made (e.g., “Added GA4 Configuration Tag and integrated GTM with WordPress.”).
• This is good practice for tracking changes over time.

1. Publish:

• Click the Publish button.

Your GTM container, with the new GA4 configuration tag, is now live on your WordPress website. Google Analytics 4 will start collecting data from your visitors!

Conclusion

Congratulations! You have successfully integrated Google Analytics 4 with your WordPress website using Google Tag Manager. This setup not only provides you with robust analytics capabilities to understand your audience and content performance but also gives you the power and flexibility of GTM for all your future tracking needs. Regularly check your GA4 reports to monitor your site’s performance, identify trends, and make data-driven decisions to improve your website and achieve your goals.