How to Connect GA4 to the Web Stories Plugin

On June 28, 2023, Google released an update to the WordPress Web Stories plugin to make it compatible with the new generation of Google Analytics, GA4. Users can now add their GA4 Measurement ID to the plugin to track their Web Stories traffic in GA4.

Due to other variables on sites like ad network and Google Analytics plugin, connecting GA4 to the Web Stories plugin isn’t always as simple as adding your GA4 Measurement ID to the provided field in the plugin. So, we’re going to break down how you can start tracking your Web Stories in GA4 depending on these other factors.

Mediavine vs. Raptive

The first variable to consider when connecting your Web Stories to GA4 is which ad network you’re currently with. The main ad networks, Raptive and Mediavine, have different requirements for the type of GA4 setup you need to use to be compatible with their analytics and tracking. (If you work with another ad network, please consult their support to find out what they recommend and then follow the directions below based on that recommendation.)

Mediavine’s Recommendations for GA4 and Web Stories

For connecting GA4 to start tracking your Web Stories, Mediavine requests that you use a completely separate GA4 property for tracking your Web Stories traffic. This means one GA4 property for your “main” website and a different GA4 property for your Web Stories.

Raptive’s Recommendations for GA4 & Web Stories

Raptive’s recommendation is to create a new data stream within your existing GA4 property. A data stream is a flow of data from a visitor touchpoint to Analytics. Using a separate data stream within your existing GA4 web property simplifies cross-domain traffic tracking between your Web Stories and your main website.

However, by default, Raptive’s GA4 configuration doesn’t filter out data from individual data streams, so when setting this up, you need to contact Raptive’s support team to ensure your ad analytics are configured properly to account for Web Stories’ traffic.

Google Analytics Plugin Considerations

The second variable to consider is how your Google Analytics tracking code is being added to your WordPress website. While there are many ways to add a GA4 tracking code to a WordPress website, so far, the only special consideration we’ve run into is with the Site Kit by Google plugin.

If you’re using the Site Kit plugin to add the Google Analytics tracking codes to your website, see the specific directions for Site Kit below when integrating GA4 and Web Stories.

Connect GA4 to the Web Stories Plugin

Like connecting GA4 to your website, a few steps are involved in setting up GA4 tracking for Web Stories.

• Step 1a (Mediavine publishers only): Create a new GA4 property.
• Step 1b (Raptive and other publishers): Create a new GA4 data stream.
• Step 2a (If you don’t use Site Kit): Add your Measurement ID to the Web Stories plugin.
• Step 2b (Site Kit users): Add the Site Kit compatibility code snippets to your website.

Step 1a: Create a New GA4 Property for Web Stories (Mediavine Publishers only)

If you didn’t opt out of Google’s automatic GA4 creation for your existing Web Stories property, you may already have a GA4 Measurement ID that you can use. The video below will walk you through finding out if you have an existing ID. And, if you don’t have one, we’ll show you how to create one to add to Web Stories.

Video Walkthrough

Step-by-Step Instructions

How to Check if You Already Have a GA4 Property for Web Stories and Find Your Measurement ID

1. Login to your Google Analytics dashboard.
2. Locate the Universal Analytics (UA) property you’ve been using for Web Stories.
3. Click on the Admin link at the bottom left corner of the screen.
4. In the middle column under the blue button that says “Create Property”, click on the GA4 Setup Assistant link.

5. If you have a Connected Property (a GA4 property attached to your existing UA Web Stories property), it will show on the page. We’re looking for the Property ID shown on the page.

6. On the left, under the blue “Create Property” button, click on the name of the current UA property being shown. A drop-down menu will appear for all the properties in the account. Find the property matching Property ID shown under the Connected Property info and click on it.

7. Under the right-hand column, click on the Data Streams link.

8. In the Data Stream details page, click on the name of your data stream to open the details page.

9. In the Web stream details modal, locate the Measurement ID and copy it. This is the data you will need to enter into your Web Stories plugin settings.

How to Create a New GA4 Property and Find Your Measurement ID (for when you don’t already have a Web Stories GA4 Property)

1. In your Google Analytics dashboard, click on the Admin link at the bottom left corner of the screen.
2. In the middle column, click the Create Property button.

2. Under the “Property details”, give your new GA4 property a name (example “Fiona Foodie Web Stories GA4”) and select the appropriate time zone (New York, U.S. EST if appropriate for your ad network). Then click the Next button.

3. Enter the requested details about your business and business objectives and then click the Create button.
4. On the Start collecting data page, click on the Web option under Choose a platform.

5. In the Set up data stream modal, enter your Website URL and Stream name and click the Create stream button.

6. Dismiss the Installation instructions to see your Measurement ID and copy it. This is the data you will need to enter into your Web Stories plugin settings.

Step 1b: Create a New GA4 Data Stream (Raptive and other publishers)

Video Walkthrough

Step-by-Step Instructions

1. In your Google Analytics dashboard, navigate to your current GA4 property.
2. Click the Admin link at the bottom left-hand corner of the screen.
3. Under the column with the blue “Create Property” button, click on the Data Streams link.

4. Click the blue Add stream button and select the Web option from the drop-down.

5. In the “Notice” pop-up click Yes that you want to create another web stream.

6. In the Set up data stream modal, enter your Website URL and Stream name and click the Create stream button.

7. Dismiss the Installation instructions to see your Measurement ID and copy it. This is what you will need to enter into your Web Stories plugin settings.

Step 2a: Add Your Measurement ID to the Web Stories Plugin. (If you don’t use Site Kit)

Video Walkthrough

Step-by-Step Instructions

1. In the WordPress dashboard, check the Web Stories plugin installed on your site by going to Plugins >> Installed Plugins.

2. On the Plugins page, scroll down until you find the Web Stories plugin. The version should be 1.33.0 or higher. If it is not, click the Update now link to update the plugin to the latest version.

3. Click on the Web Stories Settings link (can also be accessed via the Stories > Settings link in the sidebar).

4. In the Google Analytics field in the Web Stories settings, there may be a legacy Universal Analytics Measurement ID. Replace that ID with your new GA4 Measurement ID and click the Save button.

5. If your site uses a caching plugin like WP Rocket or Cloudflare caching, make sure to clear your site caches so that the new Measurement ID becomes active on the front-end of the site.

Step 2b: Add the Site Kit Compatibility Code Snippets. (Site Kit users)

Video Walkthrough

Code Snippets

The Snippet: Adds the GA4 Tag to the Web Stories pages and disables the Site Kit GA Tag on Web Stories

function add_ga4_amp_script() {
    $ga4_amp_script = '
<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include">
<script type="application/json">
{
  "vars": {
    "GA4_MEASUREMENT_ID": "G-xxxxxx",
    "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
    "GOOGLE_CONSENT_ENABLED": false,
    "WEBVITALS_TRACKING": false,
    "PERFORMANCE_TIMING_TRACKING": false,
    "DEFAULT_PAGEVIEW_ENABLED": true,
    "SEND_DOUBLECLICK_BEACON": false,
    "DISABLE_REGIONAL_DATA_COLLECTION": false,
    "ENHANCED_MEASUREMENT_SCROLL": false
  }
}
</script>
</amp-analytics>
';
    echo $ga4_amp_script;
}
add_action('web_stories_print_analytics', 'add_ga4_amp_script');

// Prevent Sitekit from loading UA
add_filter(
    'googlesitekit_analytics_tag_amp_blocked',
    static function ( $blocked ) {
       return $blocked ?: is_singular( 'web-story' );
    }
);


// Prevent Sitekit from loading ga4
add_filter(
    'googlesitekit_analytics-4_tag_amp_blocked',
    static function ( $blocked ) {
       return $blocked ?: is_singular( 'web-story' );
    }
);

Click to copy

Step-by-Step Instructions

1. Make sure you have a snippet plugin like WP Code Lite or Code Snippets installed so that you can add the necessary snippets.
2. In the WordPress dashboard, navigate to the Code Snippets >> + Add Snippet (for WP Code Lite) or Snippets >> Add New (for Code Snippets) page to start adding a new snippet.

3. On the WP Code Lite “Add Snippet” page, click the Use snippet button that appears when you hover your cursor over the box that says Add Your Custom Code (New Snippet).

4. Give your code snippet a name like “New Web Stories Measurement ID”.

5. Copy and paste the code for The Snippet from above into the Code Preview box.

6. In the snippet code, replace the text G-xxxxxx with your GA4 Measurement ID.

7. Next, at the right of the screen, under the Code Type drop-down, select PHP Snippet option. Toggle the snippet status toggle to Active. And finally, click the blue Save Snippet button to activate the snippet.

8. If your site uses a caching plugin like WP Rocket or Cloudflare caching, clear your site caches so that the new Measurement ID becomes active on the front end of the site.

That should do it! Whether you’re a Mediavine or Raptive publisher and whether or not you use the Site Kit plugin, the steps above should have you tracking your Web Stories with GA4.