Add GA event tracking for the No Audiences Banner and Info Notice

assets/js/components/LeanCTABanner.js

@@ -22,43 +22,48 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-export default function LeanCTABanner( {
- className,
- children,
- Icon,
- SVGGraphic,
-} ) {
- return (
- <div
- className={ classnames(
- 'googlesitekit-lean-cta-banner',
- className
- ) }
- >
- <div className="googlesitekit-lean-cta-banner__body">
- { Icon && (
- <div className="googlesitekit-lean-cta-banner__body-icon">
- <Icon width="32" height="32" />
- </div>
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+const LeanCTABanner = forwardRef(
+ ( { className, children, Icon, SVGGraphic }, ref ) => {
+ return (
+ <div
+ ref={ ref }
+ className={ classnames(
+ 'googlesitekit-lean-cta-banner',
+ className
  ) }
- {
- <div className="googlesitekit-lean-cta-banner__body-content">
- { children }
+ >
+ <div className="googlesitekit-lean-cta-banner__body">
+ { Icon && (
+ <div className="googlesitekit-lean-cta-banner__body-icon">
+ <Icon width="32" height="32" />
+ </div>
+ ) }
+ {
+ <div className="googlesitekit-lean-cta-banner__body-content">
+ { children }
+ </div>
+ }
+ </div>
+ { SVGGraphic && (
+ <div className="googlesitekit-lean-cta-banner__graphic">
+ <SVGGraphic />
  </div>
- }
+ ) }
  </div>
- { SVGGraphic && (
- <div className="googlesitekit-lean-cta-banner__graphic">
- <SVGGraphic />
- </div>
- ) }
- </div>
- );
-}
+ );
+ }
+);
 
 LeanCTABanner.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node.isRequired,
  Icon: PropTypes.elementType,
  SVGGraphic: PropTypes.elementType,
 };
+
+export default LeanCTABanner;

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNotice.js

@@ -22,43 +22,48 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { Button } from 'googlesitekit-components';
 import LightbulbIcon from '../../../../../../svg/icons/lightbulb.svg';
 
-export default function InfoNotice( {
- className,
- content,
- dismissLabel,
- Icon = LightbulbIcon,
- onDismiss,
-} ) {
- return (
- <div
- className={ classnames(
- 'googlesitekit-audience-segmentation-info-notice',
- className
- ) }
- >
- <Icon width="20" height="20" />
- <div className="googlesitekit-audience-segmentation-info-notice__body">
- <p>{ content }</p>
-
- { dismissLabel && (
- <Button
- tertiary
- onClick={ onDismiss }
- className="googlesitekit-audience-segmentation-info-notice__dismiss"
- >
- { dismissLabel }
- </Button>
+const InfoNotice = forwardRef(
+ (
+ { className, content, dismissLabel, Icon = LightbulbIcon, onDismiss },
+ ref
+ ) => {
+ return (
+ <div
+ ref={ ref }
+ className={ classnames(
+ 'googlesitekit-audience-segmentation-info-notice',
+ className
  ) }
+ >
+ <Icon width="20" height="20" />
+ <div className="googlesitekit-audience-segmentation-info-notice__body">
+ <p>{ content }</p>
+
+ { dismissLabel && (
+ <Button
+ tertiary
+ onClick={ onDismiss }
+ className="googlesitekit-audience-segmentation-info-notice__dismiss"
+ >
+ { dismissLabel }
+ </Button>
+ ) }
+ </div>
  </div>
- </div>
- );
-}
+ );
+ }
+);
 
 InfoNotice.propTypes = {
  className: PropTypes.string,
@@ -67,3 +72,5 @@ InfoNotice.propTypes = {
  Icon: PropTypes.elementType,
  onDismiss: PropTypes.func,
 };
+
+export default InfoNotice;

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNoticeWidget/constants.js

@@ -38,39 +38,62 @@ export const AUDIENCE_INFO_NOTICE_HIDE_UI =
  */
 export const AUDIENCE_INFO_NOTICE_SLUG = 'audience-segmentation-info-notice';
 
+// Notice slugs: new-visitors, compare-metrics, custom-audiences, purchasers, returning-visitors, compare-new-returning, or compare-cities
+
 /**
  * List of info notices for audiences.
  *
  * @since 1.130.0
  * @private
  */
 export const AUDIENCE_INFO_NOTICES = [
- __(
- 'The higher the portion of new visitors you have, the more your audience is growing. Looking at what content brings them to your site may give you insights on how to reach even more people.',
- 'google-site-kit'
- ),
- __(
- 'Select up to three visitor groups to display on the dashboard and easily compare metrics between them.',
- 'google-site-kit'
- ),
- __(
- 'Configure your own custom audiences in Analytics to gain deeper insights into visitor behavior, for example consider creating an “Existing customers” or “Subscribers” segment, depending on what goals you have for your site.',
- 'google-site-kit'
- ),
- __(
- 'Select the Purchasers visitor group to gain insights into which visitors bring the most revenue to your site.',
- 'google-site-kit'
- ),
- __(
- 'The more returning visitors your site has, the stronger and more loyal an audience you’re building. Check which content brings people back to your site - it might help you create a strategy to build a community.',
- 'google-site-kit'
- ),
- __(
- 'Compare the ratio of “new” to “returning” visitors – this can give you insights on whether you have more people stopping by as a one-off, or more loyal visitors.',
- 'google-site-kit'
- ),
- __(
- 'Check the cities which bring you more new vs more returning visitors – there might be new audiences you could engage with in locations you hadn’t thought about.',
- 'google-site-kit'
- ),
+ {
+ slug: 'new-visitors',
+ content: __(
+ 'The higher the portion of new visitors you have, the more your audience is growing. Looking at what content brings them to your site may give you insights on how to reach even more people.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'compare-metrics',
+ content: __(
+ 'Select up to three visitor groups to display on the dashboard and easily compare metrics between them.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'custom-audiences',
+ content: __(
+ 'Configure your own custom audiences in Analytics to gain deeper insights into visitor behavior, for example consider creating an “Existing customers” or “Subscribers” segment, depending on what goals you have for your site.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'purchasers',
+ content: __(
+ 'Select the Purchasers visitor group to gain insights into which visitors bring the most revenue to your site.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'returning-visitors',
+ content: __(
+ 'The more returning visitors your site has, the stronger and more loyal an audience you’re building. Check which content brings people back to your site - it might help you create a strategy to build a community.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'compare-new-returning',
+ content: __(
+ 'Compare the ratio of “new” to “returning” visitors – this can give you insights on whether you have more people stopping by as a one-off, or more loyal visitors.',
+ 'google-site-kit'
+ ),
+ },
+ {
+ slug: 'compare-cities',
+ content: __(
+ 'Check the cities which bring you more new vs more returning visitors – there might be new audiences you could engage with in locations you hadn’t thought about.',
+ 'google-site-kit'
+ ),
+ },
 ];

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/InfoNoticeWidget/index.js

@@ -32,7 +32,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { useDispatch, useInViewSelect, useSelect } from 'googlesitekit-data';
 import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
-import { WEEK_IN_SECONDS } from '../../../../../../util';
+import { trackEvent, WEEK_IN_SECONDS } from '../../../../../../util';
 import whenActive from '../../../../../../util/when-active';
 import InfoNotice from '../InfoNotice';
 import {
@@ -42,8 +42,15 @@ import {
 } from './constants';
 import { MODULES_ANALYTICS_4 } from '../../../../datastore/constants';
 import { CORE_UI } from '../../../../../../googlesitekit/datastore/ui/constants';
+import withIntersectionObserver from '../../../../../../util/withIntersectionObserver';
+import useViewContext from '../../../../../../hooks/useViewContext';
+
+const InfoNoticeWithIntersectionObserver =
+ withIntersectionObserver( InfoNotice );
 
 function InfoNoticeWidget( { Widget, WidgetNull } ) {
+ const viewContext = useViewContext();
+
  const availableAudiences = useInViewSelect( ( select ) => {
  const audiences = select( MODULES_ANALYTICS_4 ).getAvailableAudiences();
  return audiences?.map( ( audience ) => audience.name );
@@ -79,18 +86,25 @@ function InfoNoticeWidget( { Widget, WidgetNull } ) {
 
  const { dismissPrompt } = useDispatch( CORE_USER );
 
- const onDismiss = useCallback( async () => {
+ const onDismiss = useCallback( () => {
  if ( undefined === dismissCount ) {
  return;
  }
 
- const twoWeeksInSeconds = WEEK_IN_SECONDS * 2;
- const expiry = dismissCount + 1 < noticesCount ? twoWeeksInSeconds : 0;
-
- await dismissPrompt( AUDIENCE_INFO_NOTICE_SLUG, {
- expiresInSeconds: expiry,
+ trackEvent(
+ `${ viewContext }_audiences-info-notice`,
+ 'dismiss_notice',
+ AUDIENCE_INFO_NOTICES[ dismissCount ].slug
+ ).finally( () => {
+ const twoWeeksInSeconds = WEEK_IN_SECONDS * 2;
+ const expiry =
+ dismissCount + 1 < noticesCount ? twoWeeksInSeconds : 0;
+
+ dismissPrompt( AUDIENCE_INFO_NOTICE_SLUG, {
+ expiresInSeconds: expiry,
+ } );
  } );
- }, [ dismissCount, dismissPrompt, noticesCount ] );
+ }, [ dismissCount, dismissPrompt, noticesCount, viewContext ] );
 
  // Return null if there are no matching audiences or if the notice has been dismissed.
  if (
@@ -103,12 +117,21 @@ function InfoNoticeWidget( { Widget, WidgetNull } ) {
  return <WidgetNull />;
  }
 
+ const { slug, content } = AUDIENCE_INFO_NOTICES[ dismissCount ];
+
  return (
  <Widget noPadding>
- <InfoNotice
- content={ AUDIENCE_INFO_NOTICES[ dismissCount ] }
+ <InfoNoticeWithIntersectionObserver
+ content={ content }
  dismissLabel={ __( 'Got it', 'google-site-kit' ) }
  onDismiss={ onDismiss }
+ onInView={ () => {
+ trackEvent(
+ `${ viewContext }_audiences-info-notice`,
+ 'view_notice',
+ slug
+ );
+ } }
  />
  </Widget>
  );