add GA4 specific code (#6638)

ampproject · Jun 27, 2023 · ab40b51 · ab40b51
1 parent ad5ee30
commit ab40b51
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/examples/source/advertising-analytics/Tracking_Core_Web_Vitals.html b/examples/source/advertising-analytics/Tracking_Core_Web_Vitals.html
@@ -83,21 +83,23 @@
   ## Tracking Core Web Vitals in AMP using Google Analytics
   -->
   <!--
-  Analytics must be configured in the body. Here we use Google Analytics to track pageviews and use the `extraUrlParams` feature to append the Core Web Vitals to the request URL.
+  Analytics must be configured in the body. Here we use the `type=gtag` attribute and value to enable Google Analytics to track pageviews and use the `extraUrlParams` feature to append the Core Web Vitals to the request URL.
+
+  We also set the data-credentials attribute to "include" to enable cookies.
 
 [tip type="note"]
 Google Analytics metrics are required to be whole numbers. Since Cumulative Layout Shift is measured from 0 to 1, you can use the built in "$CALC" macro to get greater precision.
 
 $CALC(${cumulativeLayoutShift}, 1000, multiply)
 [/tip]
   -->
-  <amp-analytics type="googleanalytics">
+  <amp-analytics type="gtag" data-credentials="include">
     <script type="application/json">
       {
         "vars": {
-           "gtag_id": "UA-XXXXXXXXX-X",
+           "gtag_id": "G-XXXXXXXX",
            "config": {
-             "UA-XXXXXXXXX-X": {
+             "G-XXXXXXXX": {
                 "groups": "default"
              }
            }
@@ -140,6 +142,12 @@
     </script>
   </amp-analytics>
 
+  <!--
+  ## Google Analytics 4 and AMP
+  -->
+  <!--
+  For more information on how to set up Google Analytics 4 with amp-analytics see https://developers.google.com/analytics/devguides/collection/amp-analytics and https://developers.devsite.corp.google.com/tag-platform/gtagjs/amp?technology=gtagjs
+  -->
 
   <!--
   ## Comparing performance on AMP Cache vs Origin
@@ -153,13 +161,13 @@
 
 Once you have created the Custom Dimension to track the AMP Host, make sure you note the `Index` listed on the analytics page. This number is used in our configuration objects to connect `ampdocHost` to the Dimension you just created. Below  we assume your index was "1", (i.e. `cd1`). If your `Index` is 2, then use `cd2`, etc.
   -->
-  <amp-analytics>
+  <amp-analytics type="gtag" data-credentials="include">
     <script type="application/json">
       {
         "vars": {
-           "gtag_id": "UA-XXXXXXXXX-X",
+           "gtag_id": "G-XXXXXXXX",
            "config": {
-             "UA-XXXXXXXXX-X": {
+             "G-XXXXXXXX": {
                 "groups": "default"
              }
            }

diff --git a/...-dev/documentation/guides-and-tutorials/optimize-measure/tracking-engagement.md b/...-dev/documentation/guides-and-tutorials/optimize-measure/tracking-engagement.md
@@ -15,6 +15,9 @@ Analytics platforms are commonly integrated into websites through inline JavaScr
 **TIP –** If you're using Google Analytics as your analytics provider, learn [`amp-analytics`](../../../documentation/components/reference/amp-analytics.md).
 [/tip]
 
+## Google Analytics 4 and AMP
+The documentation on this page mostly applies for Universal Analytics. For information on how to set up Google Analytics 4 with amp-analytics see https://developers.google.com/analytics/devguides/collection/amp-analytics  and https://developers.devsite.corp.google.com/tag-platform/gtagjs/amp?technology=gtagjs.
+
 ## For context: Analytics on non-AMP pages
 
 The following is an example of traditional JavaScript-driven Google Analytics tracking. We'll rewrite this into the [`amp-analytics`](../../../documentation/components/reference/amp-analytics.md) JSON format but first, let's look at the traditional approach: