Measure Core Web Vitals field data with Ad metrics

1. Before you begin

In this codelab, you learn how to measure Core Web Vitals with a pre-built Google Tag Manager (GTM) tag template and to send the data to a Google Analytics 4 (GA4) property. You will also learn how to pull data from Google Ad Manager and Google AdSense to GA4, in order to correlate Core Web Vitals field data and ad performance metrics with a pre-built Looker Studio Dashboard.

What you'll do

• Import and setup a tag into your Google Tag Manager container.
• Measure the web page's Core Web Vitals in GA4.
• Setup a GA4 event tag in Google Tag Manager.
• Explore the web vitals data in the dataLayer and in GA4 reporting.
• Link your GA4 property with Google Ad Manager and Google AdSense.
• Correlate Core Web Vitals and ad revenue through a Looker Studio dashboard.

What you'll need

• A Google Analytics account and a GA4 web property with editor access.
• A Google Tag Manager account and web container with publishing rights.
• A Google Ad Manager network and/or Google AdSense account with admin access.
• A Looker Studio account.

2. Add the tag template from GitHub to GTM

Measuring Core Web Vitals through a GTM tag template is based on the web-vitals library. First, we'll download the GTM tag template.

1. Open the template.tpl file
2. Download the file on your computer

Now, go to your Google Tag Manager account.

1. Open your web container.
2. Create a new workspace and enter a name (e.g. "Core Web Vitals measurement").
3. Go to "Templates".
4. In the "Tag Templates" section, click the "New" button.

5. Click the More Actions menu and select Import.

6. Select the previously downloaded TPL file from your computer.
7. Click the "Save" button.

You added the tag template to your Google Tag Manager container.

3. Setup the Web Vitals tag

1. In your Google Tag Manager workspace, go to "Tags".
2. Add the Web Vitals tag by clicking on "New", then "Tag Configuration" and choose the "Web Vitals" tag from the "Custom" section.
3. Next step is so configure the different settings. All the settings are explained in the GitHub repository. For this codelab and the final dashboard to work the following settings are sufficient.

4. Apply one of the page view triggers, e.g. the "All Pages" trigger.
5. Add also trigger exceptions if needed.
6. Name the tag as "Core Web Vitals - All Pages" and save it.

4. Explore Web Vitals data in the dataLayer

To see the tag in action, switch to the preview mode of Google Tag Manager. The Tag Assistant will open and will ask for a URL to preview and debug your setup. Provide a URL to a page with the Google Tag Manager container implemented and click on "Connect". A separate tab with the provided URL will open.

1. Interact with the page by scrolling and clicking on elements or white spaces.
2. Then switch back to the tab with the Tag Assistant and preview mode of Google Tag Manager.
3. On the left you will see the different events pushed into the dataLayer.
4. First you should check if the Web Vitals tag fired on your chosen page view trigger.

5. You should also see three "web_vitals" events, where each of them represents one Core Web Vital: LCP, INP and CLS.

6. Click on the first one and on the right open the "API Call" tab, where you will see the data pushed from the tag template into the dataLayer.

7. Check also the other entries of the "web_vitals" events. Use the web-vitals.js documentation as a reference for the different data types.

5. Send Web Vitals data to GA4

To pull the Core Web Vitals data from the dataLayer and to send it to GA4, you have to:

• Create a trigger for the GA4 tag
• Create variables to pull data from the dataLayer
• Create the GA4 event tag

Create the trigger

1. In your Google Tag Manager workspace, go to "Triggers".
2. Add a new trigger by clicking on "New", then "Trigger Configuration" and choose "Custom Event" from the "Other" section.
3. Set "web_vitals" in the Event name field, name the trigger and save.

Create the dataLayer variables

1. In your Google Tag Manager workspace, go to "Variables".
2. Create a new user-defined variable from type "Data Layer Variable".
3. Set "webVitalsData.name" in the Data Layer variable name field, name the variable (e.g. "DLV - webVitalsData.name") and save.

4. Repeat these steps for the other four required data layer variables. Create "webVitalsData.value".

5. Create another variable with the name field "webVitalsData.id".

6. Create "webVitalsData.rating".

7. Create "webVitalsData.delta".

8. You should end up with the following user-defined dataLayer variables:

Create the GA4 event tag

Before creating a GA4 event tag make sure that your Google tag is already set up.

1. In your Google Tag Manager workspace, go to "Tags".
2. Add a GA4 event tag by clicking on "New", then "Tag Configuration" and choose the "Google Analytics: GA4 event" tag from the "Google Analytics" section.
3. Input your Measurement ID in the corresponding field.

4. For the "Event Name" input field, choose dataLayer variable "DLV - webVitalsData.name" from previously created step.

5. Add the other dataLayer variables as event parameters as shown in the screenshot. Also make sure to add the parameter "event_category" with a value like "Web Vitals" to group the Core Web Vitals events.

6. Register these event parameters as custom dimensions in the GA4 UI.
7. Apply additional settings based on your GA4 setup requirements.
8. Set the "web_vitals" custom event as a trigger for the GA4 tag.
9. Add also trigger exceptions if needed.

6. Check data in GA4

To validate data flow to GA4 switch again to the preview mode of Google Tag Manager. Provide a URL to the Tag Assistant and click on "Connect".

1. Interact with the page by scrolling and clicking on elements or white spaces.
2. Then switch back to the tab with the Tag Assistant and preview mode of Google Tag Manager.
3. On the left, click on each of the "web_vitals" entries and confirm that the GA4 Core Web Vitals tag fires.

4. Open the GA4 tag by clicking on the card to validate, that data is correctly pulled from the dataLayer. Make sure to display variables as values.

5. Now switch to your GA4 property and open the Realtime report.
6. In the "Event count by event name" card you can validate if your Core Web Vitals events are collected successfully.

7. If a large amount of data is processed in the realtime report, it may be possible that the events are not so easily identifiable. In that case use the debugview report, which lets you see data for a specific device.

7. Publish your setup

Once you successfully tested your setup it's time to publish your workspace.

1. Open your Google Tag Manager workspace.
2. At the top right within the UI, click on "Submit".
3. Provide a version name and version description and push your setup to live by clicking on "Publish".

8. Connect GA4 with Google Ad Manager or Google AdSense

After collecting Core Web Vitals data in GA4, ad-related metrics also needs to be available in GA4 for the dashboard to work. Connect either Google Ad Manager and Google AdSense with GA4 or just one of these ad solutions. Please note, that you must have editor (or higher) permission in GA4 and administrator permission in Google Ad Manager and Google AdSense for the linking.

Connect GA4 with Google Ad Manager

1. Go to your Google Ad Manager network.
2. Click "Admin" -> "Global settings" -> "Network settings".
3. In the "Report settings" section, enable "Google Analytics 4 property Reports in Ad Manager reporting".

4. Review the terms and conditions and click "Confirm".
5. Save the update.
6. Go to "Admin" -> "Linked accounts" -> "Google Analytics 4".
7. Click "New Google Analytics 4 property link".
8. Find and select your GA4 property you want to link.
9. Click Save and you're done.

Connect GA4 with Google AdSense

1. Go to your Google AdSense account.
2. Click "Account" -> "Access and authorization" -> "Google Analytics integration".
3. Click "+New link".

4. Find and select your GA4 property you want to link.
5. Click "Create link".

9. Visualize data with Looker Studio

For a visual presentation of Core Web Vitals data together with ad metrics this step involves to setup a Looker Studio Dashboard. Please follow these steps to correlate Core Web Vitals and ad revenue.

1. Open this Looker Studio Dashboard Template
2. Copy the dashboard.
3. Update the data source by selecting your GA4 property from the dropdown list.
4. Done

Please note, in order for the Dashboard to work and display data correctly, the data relies on the syntax and naming convention from this codelab.

Page one of the dashboard will give you a historical view of your Core Web Vitals performance:

On the second page you can correlate Core Web Vitals with ad revenue from Google Ad Manager and/or Google AdSense:

Third page gives you the ability to analyze Core Web Vitals performance on page path level together with ad-related metrics:

10. Conclusion

Congratulations! You learned how to measure and report Core Web Vitals with GA4 and ad performance metrics from Google Ad Manager and Google AdSense.

Learn more

• Correlating Core Web Vitals and ad revenue with Google tools
• Effectively loading ads without impacting page speed
• Optimize Largest Contentful Paint
• Optimize Cumulative Layout Shift
• Optimize Interaction to Next Paint