Create Ads Module Setup CTA Banner

[10upsimon]

Feature Description

With the Ads module now released, there is a need to create an Ads setup banner with applicable CTA that prompts the users to set up the module should they not yet have it set up. This setup banner will function like all prior setup banners and will contain a CTA to facilitate module set up, or be dismissed.

The Figma design can be viewed here. Following is a screenshot of the final setup banner design:

Note, copy is not final at the time of writing, and will likely be altered prior to execution. This issue will be updated to reflect the final copy once it is approved.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• An Ads setup banner is to be created as per the Figma design here.
• Said banner should only display for users who do not already have the Ads module set up
• Said banner should contain two CTA's as per the design:
  • A "Set up Ads" CTA button that takes the user to the Ads module setup screen
  • A "Maybe later" CTA link that dismisses the banner
• When the banner is dismissed via the "Maybe later" CTA link:
  • The banner should be hidden for 14 days
• When the banner re-appears after 14 days:
  • The "Maybe later" CTA should be renamed "Don’t show again"
  • Dismissing the banner via the "Don't show again" CTA should permanently hide/dismiss it for the user

Implementation Brief

• Create a new component assets/js/modules/ads/components/dashboard/AdsModuleSetupCTAWidget.js
  • Add a new constant ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY = "ads_module_setup_banner_prompt_dismissed_key"
  • Use the isModuleActive selector on CORE_MODULES to check if the ads module is already active, if it is active, return null from the component so that it is not rendered on the dashboard.
  • Layout the component title, body and SVGs using CSS grid and flexbox in a SCSS file assets/sass/components/ads/_googlesitekit-ads-setup-banner.scss based on the latest FIGMA design
    • Implement the responsive single column layouts for tablet and mobile.
    • Use the useBreakpoint hook to conditionally render the three different SVGs for each breakpoint; desktop, tablet and mobile.
  • Create the primary CTA "Set up Ads" as a default Button component with which calls an onSetup callback function:
    • In this function, use the activateModule selector to get the moduleReauthURL, then use navigateTo to go to the module setup, as we do in the SetupModule onSetup function
    • Use trackEvent here to track an activate_module event, as we do in the SetupModule onSetup function
  • Use the prompts functionality to conditionally render the entire component and the secondary CTA:
    • Get the dismissed state using isPromptDismissed passing the slug ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY.
    • Get the dismissed count using getPromptDismissCount passing the slug ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY.
    • If the prompt count is > 1 or the prompt is currently dismissed, return null from the component so that it doesn't render on the dashboard.
    • Add the secondary CTA using a tertiary button:
      • Conditionally render the Button text, if the dismissed count < 1, the text should be "Maybe later", otherwise it should be "Don't show again".
      • Create a handleDismissClick function and add it to the onClick event of this button
        • If the dismiss count is < 1, dismiss the prompt to the current timestamp + 14 days using: await dismissPrompt( ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY, { expiresInSeconds: twoWeeksInSeconds});
        • In the else statement, permanently dismiss the prompt by calling dismissPrompt( ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY ); with no second argument.
• Import and add the new component to the dashboard under the existing consent mode widget, rendering it conditional if the user is not in the view only context:
  

  site-kit-wp/assets/js/components/DashboardEntityApp.js

  Line 225 in 9555a23

  { ! viewOnlyDashboard && <ConsentModeSetupCTAWidget /> }

Test Coverage

• Create a new Storybook story for this component. Make sure each new story is added as a scenario to the VRTs by adding a scenario prop to each story.

QA Brief

• Setup Site Kit
• Ensure Ads module is not active
• Verify that setup banner is showing (only when Ads module is not active)
• Verify that buttons behave as described in AC
• Once Maybe Later is clicked, banner should not show again. So, set the reference date in tester plugin to something over 14 days, 15days or 1 month for example. And verify that banner is showing again with second CTA having text "Don’t show again" and after it is clicked, banner is permanently dismissed

Changelog entry

• Add the Ads module setup CTA banner.

[tofumatt]

Looks good. I'm guessing we don't have any GA events defined yet for this banner, but we should probably add those as well in a follow-up issue 😅

(If we get them in soon we can probably just add it to this issue's ACs.)

ACs look good, moving to IB.

[benbowler]

I've created the IB today, one thing to note and discuss in the IBR is that we could quite easily have the Consent Mode and Ads Module widgets both rendering on the dashboard. We could prevent this as a one off by doing some kind of check for the Consent Mode display state within this new Widget but that's not very flexible and brings in CoMo logic to an Ads module widget, although perhaps this is acceptable for now?

We could perhaps create a follow up ticket to create a higher level component for these banners that handles the checks and only renders one at a time regardless if multiple widgets meet their display condition.

---

I'm also waiting on details of the responsive designs from @sigal-teller here.

[benbowler]

Putting this into IBR, this comment from above still applies and is worth discussing:

I've created the IB today, one thing to note and discuss in the IBR is that we could quite easily have the Consent Mode and Ads Module widgets both rendering on the dashboard. We could prevent this as a one off by doing some kind of check for the Consent Mode display state within this new Widget but that's not very flexible and brings in CoMo logic to an Ads module widget, although perhaps this is acceptable for now?

We could perhaps create a follow up ticket to create a higher level component for these banners that handles the checks and only renders one at a time regardless if multiple widgets meet their display condition.

[eugene-manuilov]

Thanks, @benbowler. Mostly looks good to me.

• Create the primary CTA "Set up Ads" as a default Button component which links to ${ settingsURL }&slug=ads&reAuth=true with the settingsURL retrieved with the getAdminURL selector passing googlesitekit-settings.

We need to use the same approach that we use in the settings when we click on the connect button:

site-kit-wp/assets/js/components/settings/SetupModule.js

Lines 60 to 69 in e626cfc

	const { error, response } = await activateModule( slug );
	if ( ! error ) {
	await trackEvent(
	`${ viewContext }_module-list`,
	'activate_module',
	slug
	);
	navigateTo( response.moduleReauthURL );

... we could quite easily have the Consent Mode and Ads Module widgets both rendering on the dashboard...

Yes, let's not worry about that for now. We will create a follow up task if it is needed.

[benbowler]

Thanks @eugene-manuilov, I've updated the IB module activation steps.

[eugene-manuilov]

Thanks, @benbowler. IB ✔️

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified all cases mentioned under AC and QAB.
• Compared design with Figma.

@zutigrm Please find my observations below

1) Font family for the banner title is 'Google Sans Display' in Figma where as under actual implementation it is 'Google Sans Text'.

2) We don't have figma design for large tablet viewports but design under Viewports having width between 961px to 1132px is looking off with space appearing below the image.

3) In smaller tablet viewports font size is different from figma. On smaller tablets we implemented same font size as mobile viewports. Tested on iPad air and Surface Pro smaller tablet viewports.

Figma -

Dev environment -

4) The 'Maybe later' CTA is not functioning as expected according to the acceptance criteria and QA brief. Clicking on the 'Maybe later' CTA does not dismiss the banner but instead renames the CTA to "Don’t show again". Clicking on 'Don’t show again' dismisses the banner. Additionally, upon each refresh when the dashboard loads, the Ads module setup CTA banner briefly displays for a few milliseconds before hiding.

Recording.993.mp4

[mohitwp]

QA Update ⚠️

• Tested on main environment.
• Verified above reported issues 1 to 3 are resolved now.

@zutigrm I verified that on clicking the 'Maybe later' CTA banner, it gets dismissed and does not reappear when reloading the dashboard. However, it doesn't reappear even when I set the reference date in the tester plugin to over 14 days, 15 days, or 1 month later. Do I need to make some changes in the database, or is it getting permanently dismissed? Can you please check?

'Maybe later' CTA screencast

Recording.1005.mp4

Banner not reappearing when I set the reference date in tester plugin to something over 14 days, 15days or 1 month.

Recording.1006.mp4

PASS CASES

1) Font family for the banner title is 'Google Sans Display' in Figma where as under actual implementation it is 'Google Sans Text'. - PASS

2. We don't have figma design for large tablet viewports but design under Viewports having width between 961px to 1132px is looking off with space appearing below the image. - PASS

3) In smaller tablet viewports font size is different from figma. On smaller tablets we implemented same font size as mobile viewports. Tested on iPad air and Surface Pro smaller tablet viewports. - PASS

[zutigrm]

@mohitwp Thanks for checking it. Hm, I tested it manually on my end, as sometimes reference date doesn't affect some places. Which seems to be the case. You can edit the database, in wp_usermeta table, find the wp_googlesitekitpersistent_dismissed_prompts column and edit it.

You will see ads_module_setup_banner_prompt_dismissed_key in the data, under it, there is expires property, you can replace current timestamp with this one 1716882640 (it is 28th May)

[mohitwp]

QA Update ❌

• Tested on main environment.
• Verified functionality of 'Maybe later' CTA and 'Don't show' CTA.
• Note : Setting reference date in Tester plugin was not working so I tested it through db manipulation mentioned above.

@zutigrmI tested this on three different sites. According to the acceptance criteria, after clicking 'Maybe later', the CTA banner should display again in 14 days. In the database, the expiry date is correctly set to 14 days later. However, when I set a past date in the database, it forces the banner to display on the dashboard, but it still shows the 'Maybe later' CTA. It only displays the 'Don't show' CTA after appearing twice with the 'Maybe later' CTA.

Expected: On the second appearance, the banner should display the 'Don't show' CTA instead of 'Maybe later'.

Recording.1009.mp4

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified 'Maybe later' and 'Don't show' CTA functionality working as per AC.
• Above issue was due to space copied with timestamp.
• Verified all above issue 1 to 4 are resolved now.

1) Font family for the banner title is 'Google Sans Display' in Figma where as under actual implementation it is 'Google Sans Text'. - PASS

2. We don't have figma design for large tablet viewports but design under Viewports having width between 961px to 1132px is looking off with space appearing below the image. - PASS

3) In smaller tablet viewports font size is different from figma. On smaller tablets we implemented same font size as mobile viewports. Tested on iPad air and Surface Pro smaller tablet viewports. - PASS

4) The 'Maybe later' CTA is not functioning as expected according to the acceptance criteria and QA brief. Clicking on the 'Maybe later' CTA does not dismiss the banner but instead renames the CTA to "Don’t show again". Clicking on 'Don’t show again' dismisses the banner. Additionally, upon each refresh when the dashboard loads, the Ads module setup CTA banner briefly displays for a few milliseconds before hiding. PASS

'Maybe later' CTA

Recording.1005.mp4

'Don't Show' CTA

Recording.1012.mp4