Merge pull request ampproject#7580 from ampproject/update/googleanaly…

…tics-label

Update `Google Analytics` analytics vendor

assets/src/settings-page/analytics.js

@@ -27,7 +27,11 @@ import {
  * Internal dependencies
  */
 import { Options } from '../components/options-context-provider';
-import { AMPNotice, NOTICE_SIZE_SMALL } from '../components/amp-notice';
+import {
+ AMPNotice,
+ NOTICE_SIZE_SMALL,
+ NOTICE_TYPE_WARNING,
+} from '../components/amp-notice';
 import vendorConfigs from './vendor-configs';
 
 const GOOGLE_ANALYTICS_VENDOR = 'googleanalytics';
@@ -160,6 +164,15 @@ function AnalyticsEntry({
  </AMPNotice>
  )}
 
+ {vendorConfigs[type]?.warning && (
+ <AMPNotice
+ size={NOTICE_SIZE_SMALL}
+ type={NOTICE_TYPE_WARNING}
+ >
+ <span>{vendorConfigs[type].warning}</span>
+ </AMPNotice>
+ )}
+
  <BaseControl
  id={`analytics-textarea-control-${entryIndex}`}
  label={__('JSON Configuration:', 'amp')}

assets/src/settings-page/vendor-configs.js

@@ -31,6 +31,25 @@ const GOOGLE_ANALYTICS_NOTICE = createInterpolateElement(
  }
 );
 
+const GOOGLE_ANALYTICS_DEPRECATION_NOTICE = createInterpolateElement(
+ __(
+ 'The <Code>googleanalytics</Code> type is obsolete as Google Analytics has switched to use gtag in the transition from Universal Analytics (UA) to GA4. Please use gtag instead. Learn more about <GA4AMP>GA4 in AMP</GA4AMP>.',
+ 'amp'
+ ),
+ {
+ /* eslint-disable jsx-a11y/anchor-has-content -- Anchor has content defined in the translated string. */
+ GA4AMP: (
+ <a
+ href="https://support.google.com/analytics/topic/13706307?hl=en&ref_topic=9303319&sjid=7478006548081699185-NA"
+ target="_blank"
+ rel="noreferrer"
+ />
+ ),
+ Code: <code />,
+ /* eslint-enable jsx-a11y/anchor-has-content */
+ }
+);
+
 export default {
  '': {
  sample: '{}',
@@ -175,6 +194,7 @@ export default {
  },
  [GOOGLE_ANALYTICS_VENDOR]: {
  notice: GOOGLE_ANALYTICS_NOTICE,
+ warning: GOOGLE_ANALYTICS_DEPRECATION_NOTICE,
  sample: JSON.stringify(
  {
  vars: {

bin/update-analytics-vendors.js

@@ -168,7 +168,13 @@ class UpdateAnalyticsVendors {
 
  if (this.vendors) {
  this.vendors = Object.entries(this.vendors).map(
- ([value, label]) => ({ value, label })
+ ([value, label]) => {
+ if ('googleanalytics' === value) {
+ label = 'Google Analytics (Legacy)';
+ }
+
+ return { value, label };
+ }
  );
 
  // Sort vendors by label.

composer.json

@@ -15,7 +15,7 @@
  "ext-libxml": "*",
  "ext-spl": "*",
  "ampproject/amp-toolbox": "0.11.3",
- "cweagans/composer-patches": "~1.0",
+ "cweagans/composer-patches": "^1.0",
  "fasterimage/fasterimage": "1.5.0",
  "sabberworm/php-css-parser": "dev-master#cc791ad"
  },
@@ -28,7 +28,7 @@
  "mustache/mustache": "^2",
  "php-stubs/wordpress-stubs": "^6.0.0",
  "phpcompatibility/phpcompatibility-wp": "2.1.4",
- "phpdocumentor/reflection": "~3.0",
+ "phpdocumentor/reflection": "^3.0",
  "roave/security-advisories": "dev-latest",
  "sirbrillig/phpcs-variable-analysis": "2.11.16",
  "wp-cli/export-command": "^2.0",

tests/php/src/Admin/OptionsMenuTest.php

@@ -189,7 +189,7 @@ public function test_get_analytics_vendors() {
  $this->assertIndexedArrayContains(
  [
  'adobeanalytics:Adobe Analytics',
- 'googleanalytics:Google Analytics',
+ 'googleanalytics:Google Analytics (Legacy)',
  'gtag:gtag',
  ],
  $pairs