diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 9750bfeed8b6ab..0e612dc7970101 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -5,6 +5,7 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import AdCarbon from 'docs/src/modules/components/AdCarbon'; import AdInHouse from 'docs/src/modules/components/AdInHouse'; +import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants'; import { AdContext, adShape } from 'docs/src/modules/components/AdManager'; import { useTranslate } from '@mui/docs/i18n'; @@ -197,7 +198,7 @@ export default function Ad() { React.useEffect(() => { // Avoid an exceed on the Google Analytics quotas. - if (Math.random() < 0.9 || !eventLabel) { + if (Math.random() > GA_ADS_DISPLAY_RATIO || !eventLabel) { return undefined; } diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index 64963da1702729..bd62cf8bfe3871 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/docs/src/modules/components/AdCarbon.js @@ -126,6 +126,7 @@ export function AdCarbonInline(props) { name: ad.company, description: `${ad.company} - ${ad.description}`, poweredby: 'Carbon', + label: 'carbon-demo-inline', }} /> diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js index 1de9a19857246f..e31003bd3225de 100644 --- a/docs/src/modules/components/AdDisplay.js +++ b/docs/src/modules/components/AdDisplay.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { adShape } from 'docs/src/modules/components/AdManager'; +import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants'; import { adStylesObject } from 'docs/src/modules/components/ad.styles'; const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(({ @@ -23,6 +24,18 @@ const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(( export default function AdDisplay(props) { const { ad, className, shape = 'auto' } = props; + React.useEffect(() => { + // Avoid an exceed on the Google Analytics quotas. + if (Math.random() > GA_ADS_DISPLAY_RATIO || !ad.label) { + return; + } + + window.gtag('event', 'ad', { + eventAction: 'display', + eventLabel: ad.label, + }); + }, [ad.label]); + /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */ return ( diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js index 7e5a49edcd5a32..527946179861bd 100644 --- a/docs/src/modules/constants.js +++ b/docs/src/modules/constants.js @@ -17,8 +17,12 @@ const LANGUAGES_LABEL = [ }, ]; +// The ratio of ads display sending event to Google Analytics +const GA_ADS_DISPLAY_RATIO = 0.1; + module.exports = { CODE_VARIANTS, LANGUAGES_LABEL, CODE_STYLING, + GA_ADS_DISPLAY_RATIO, };