Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276

techanvil · 2022-05-25T17:42:33Z

Feature Description

Add the dropdown and toggle controls to the following Setup Component variants:

Existing GA4 property, no existing tag.
Existing GA4 property, existing tag.

From the Design Doc:

The dropdown and existing tag switch/notice should reuse existing components from the Analytics setup flow where possible, i.e. the GA4 PropertySelect and SetupUseSnippetSwitch components, and the Analytics setup flow can broadly serve as a reference for the implementation.

Acceptance criteria

For both the "existing GA4 property, no existing tag" and "existing GA4 property, existing tag" variants of the Setup Component:
- A dropdown to select the GA4 property should be displayed.
- The dropdown should contain all of the GA4 properties in the user's currently selected Analytics account.
- It should also contain the option to create a new property.
For the "existing GA4 property, existing tag" variant:
- A switch to toggle the usage of the snippet should be displayed.
- An informative notice about the presence of the existing tag should be displayed.
The above controls should generally be aligned with the existing setup process and reused where possible.

Implementation Brief

Refer to the implementation of Scaffold the Setup Component variants #5275 for the whereabouts of the two variants to update. Expected location assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js or possibly subcomponents.
For both variants:
- Render the analytics-4 PropertySelect component to display the property dropdown.
  - Use the label prop to specify the dropdown label text: Google Analytics 4 Property
For the "existing GA4 property, existing tag" variant:
- Use the analytics-4 useExistingTagEffect hook to keep snippet status in sync.
- Render the analytics-4 SetupUseSnippetSwitch component to display the switch and informative notice.

Test Coverage

Ensure Storybook stories are up-to-date and update relevant VRT tests.

QA Brief

Configure the Analytics module in Site Kit - use an account which does have GA4 properties associated with it.
We need to model the scenario where GA4 is not setup, so once Analytics is setup, delete the googlesitekit_analytics-4_settings option in WordPress. This can be done in a number of ways, for example:
- Using the WP CLI with wp option delete googlesitekit_analytics-4_settings.
- Running the DB query DELETE FROM wp_options WHERE option_name = 'googlesitekit_analytics-4_settings';
- Installing the WP Console plugin and running delete_option( 'googlesitekit_analytics-4_settings' ); in the console.
Go to the Site Kit Dashboard.
Click on Set up now in the displayed banner.
Verify that a property selector dropdown is displayed in the banner according to the ACs & Figma designs.

In order to make the switch to toggle the usage of snippet show up, add an existing GA4 tag to the site.

To do so, add the following to your theme's header.php file:

Inside the <head> tag:

<script async src="https://www.googletagmanager.com/gtag/js?id={ Your GA4 Property ID }"></script>

After the <body> tag starts:

<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', '{ Your GA4 Property ID }');
</script>

Verify that the toggle switch is also displayed according to the ACs & Figma designs.
- Note that the colour of the text associated with the toggle switch is not implemented according to the Figma designs to keep it consistent with its usages across other parts of Site Kit, e.g. Setup and Settings.
Verify the following stories in Modules -> Analytics 4 -> SetupBanner:
- Existing GA4 Property - No Existing Tag
- Existing GA4 Property - Existing Tag
Test existing GA account setup and editing screens, specifically scenarios that involve loading/changing Properties. This select component has been updated and should be tested to ensure it's still working as-expected.

Changelog entry

Add a dropdown/toggle to GA4 activation banner when there is an existing GA4 property.

The text was updated successfully, but these errors were encountered:

eugene-manuilov · 2022-08-05T17:29:58Z

IB ✔️

Add dropdown & toggle to GA4 Activation Banner

wpdarren · 2022-09-01T08:38:40Z

@nfmohit I am struggling to test this ticket. Have spent quite some time trying to get the dropdown on the GA4 banner notification. No rush but could we jump on a call at some point today or tomorrow to go through the QAB. Thank you.

wpdarren · 2022-09-02T10:47:11Z

QA Update: ⚠️

@nfmohit I have included a screencast to prove that I am not losing my mind 😄 but the GA4 notifications aren't appearing. I am wondering if the issue is due to removal of the ZeroDataState feature flag where Mohit has mentioned that the zero/gathering state notifications are not appearing. The notifications were appearing earlier in the week when I tested this but the dropdown to select GA4 property was not appearing.

I am going to put this ticket on hold for now, will revisit on Monday.

wpdarren · 2022-09-04T23:23:34Z

QA Update: ⚠️

@nfmohit following on from our conversation last week, I am using the latest branch, with oi.ie setup. I set up Site Kit with a UA and GA4 property. After setup I am redirected back to the Site Kit Dashboard. I do not see any GA4 banner at all appear. As we discussed the banner was appearing earlier in the week but on the latest develop branch it's not. I'm conscious that I have spent quite a lot of time trying to QA this ticket but unsuccessfully.

There are more than one GA4 property on the account so the banner with dropdown should appear to select the property, but no banner is appearing. I am not sure how to get around this since we need to set up a GA4 for Site Kit by default.

I also tested my personal site that has more than one GA4 properties and the same applies.

I would really like to move this one forward today. Any ideas how we can move forward with this?

Update: just to add when I use elasticpress.io because there's no GA4 property for that account, the GA4 banner does appear as expected but I do not have access to that account to add GA4 properties, so unable to use it for testing.

techanvil · 2022-09-05T17:44:43Z

Hey @wpdarren, apologies for not spotting this earlier - I guess I applied the fix in a bit of a hurry.

I've realised it looks a bit glitchy when showing the "existing property" variant because it first shows the "no existing property" variant for a moment before switching.

existing-property.mp4

I have a proposed fix here which shows a progress bar before showing either variant:

fix-existing-property.mp4

fix-no-existing-property.mp4

From a QA perspective does this look OK to you (maybe the progress bar should be full width?), and would you like to see this fix applied to this issue or possibly create a separate issue for it?

Nb, here is a draft followup PR for the sake of reference. #5796

wpdarren · 2022-09-06T10:06:05Z

@techanvil I've just set up a test and yes, I can see what you mean. I think the progress bar is a good solution so that there's no confusion with the flicker. I personally, feel that the fix should be part of this ticket. With regard to the progress bar I feel it should be the full width since the previous notification is full width.

A few other quick observations:

There's a red border around the GA4 dropdown, couldn't see that on the figma design.
There's no default GA4 property appearing, I am assuming that's expected but the figma design shows one so wanted to make sure that I am assuming correctly.

Would you like me to send this back to Execution and when you've completed the PR on this, I'll give it a thorough test.

techanvil · 2022-09-06T12:38:37Z

@techanvil I've just set up a test and yes, I can see what you mean. I think the progress bar is a good solution so that there's no confusion with the flicker. I personally, feel that the fix should be part of this ticket. With regard to the progress bar I feel it should be the full width since the previous notification is full width.

A few other quick observations:

There's a red border around the GA4 dropdown, couldn't see that on the figma design.

There's no default GA4 property appearing, I am assuming that's expected but the figma design shows one so wanted to make sure that I am assuming correctly.

Would you like me to send this back to Execution and when you've completed the PR on this, I'll give it a thorough test.

Thanks @wpdarren - good observations, we should be pre-selecting a GA4 property (or "Set up a new property") and with an option selected the dropdown should no longer have the red error outline.

I'll bring this back into Execution and address these points and the progress bar width too. Cheers.

aaemnnosttv · 2022-09-07T13:10:02Z

@wpdarren this should be ready for another pass on main 👍

wpdarren · 2022-09-09T11:46:18Z

QA Update: ⚠️

@aaemnnosttv @techanvil I have an observation:

As you can see from the screenshot below, the Place Google Analytics 4 code toggle is enabled. Looking at the Stories and figma designs it is disabled. I think it should be enabled, but didn't want to assume. Please could you confirm?

Verified:

A property selector dropdown is displayed in the banner according to the ACs & Figma designs.

The following stories in Modules -> Analytics 4 -> SetupBanner: Existing GA4 Property - No Existing Tag
and Existing GA4 Property - Existing Tag match the AC/Figma designs.

wpdarren · 2022-09-12T15:24:45Z

@aaemnnosttv if the behaviour I detailed above is correct then this ticket can be sent to approved. I wasn't sure if the toggle should be disabled or enabled. The figma designs and stories suggest that it should be disabled.

aaemnnosttv · 2022-09-12T18:25:09Z

@wpdarren the toggle will only be disabled if the associated measurement ID for the selected property matches the existing tag. I tested this locally and it seems to work as expected.

Matching measurement ID

Non-matching measurement ID

Thanks for clarifying! Moving to Approval + approved 👍

techanvil added the Type: Feature New feature label May 25, 2022

FlicHollis added the P1 Medium priority label May 27, 2022

tofumatt self-assigned this Jun 29, 2022

tofumatt mentioned this issue Jun 30, 2022

Scaffold the Setup Component variants #5275

Closed

tofumatt removed their assignment Jun 30, 2022

techanvil assigned techanvil and unassigned techanvil Aug 3, 2022

eugene-manuilov self-assigned this Aug 5, 2022

eugene-manuilov removed their assignment Aug 5, 2022

nfmohit self-assigned this Aug 15, 2022

nfmohit mentioned this issue Aug 17, 2022

Add dropdown & toggle to GA4 Activation Banner #5700

Merged

18 tasks

nfmohit removed their assignment Aug 18, 2022

tofumatt assigned tofumatt and nfmohit and unassigned tofumatt Aug 19, 2022

nfmohit assigned tofumatt Aug 22, 2022

tofumatt unassigned nfmohit Aug 23, 2022

tofumatt added a commit that referenced this issue Aug 23, 2022

Merge branch 'develop' into new/#5276-ga4-dropdown-toggle

f119d97

tofumatt added a commit that referenced this issue Aug 23, 2022

Merge pull request #5700 from google/new/#5276-ga4-dropdown-toggle

12d7bc1

Add dropdown & toggle to GA4 Activation Banner

tofumatt removed their assignment Aug 23, 2022

nfmohit mentioned this issue Aug 24, 2022

Create property and measurement ID from SetupBanner #5717

Merged

18 tasks

wpdarren self-assigned this Aug 26, 2022

wpdarren assigned nfmohit Sep 1, 2022

techanvil mentioned this issue Sep 5, 2022

Fix condition for showing the "existing property" Setup variants. #5793

Merged

18 tasks

techanvil mentioned this issue Sep 5, 2022

Hook up the Setup Component CTA to create/connect the property and measurement ID #5277

Closed

tofumatt assigned tofumatt and wpdarren and unassigned tofumatt Sep 5, 2022

techanvil mentioned this issue Sep 5, 2022

Fix/ga4 setup banner progress bar #5796

Merged

18 tasks

wpdarren assigned techanvil Sep 6, 2022

techanvil unassigned wpdarren and techanvil Sep 6, 2022

aaemnnosttv assigned aaemnnosttv and techanvil and unassigned aaemnnosttv Sep 6, 2022

techanvil assigned aaemnnosttv and unassigned techanvil Sep 7, 2022

aaemnnosttv assigned wpdarren and unassigned aaemnnosttv Sep 7, 2022

wpdarren assigned aaemnnosttv and techanvil and unassigned wpdarren Sep 9, 2022

aaemnnosttv unassigned techanvil Sep 12, 2022

aaemnnosttv closed this as completed Sep 12, 2022

aaemnnosttv removed their assignment Sep 12, 2022

aaemnnosttv added Type: Enhancement Improvement of an existing feature and removed Type: Feature New feature labels Sep 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276

Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276

techanvil commented May 25, 2022 •

edited

Loading

eugene-manuilov commented Aug 5, 2022

wpdarren commented Sep 1, 2022 •

edited

Loading

wpdarren commented Sep 2, 2022 •

edited

Loading

wpdarren commented Sep 4, 2022 •

edited

Loading

techanvil commented Sep 5, 2022

wpdarren commented Sep 6, 2022 •

edited

Loading

techanvil commented Sep 6, 2022

aaemnnosttv commented Sep 7, 2022

wpdarren commented Sep 9, 2022 •

edited

Loading

wpdarren commented Sep 12, 2022

aaemnnosttv commented Sep 12, 2022

Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276

Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276

Comments

techanvil commented May 25, 2022 • edited Loading

Feature Description

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

eugene-manuilov commented Aug 5, 2022

wpdarren commented Sep 1, 2022 • edited Loading

wpdarren commented Sep 2, 2022 • edited Loading

QA Update: ⚠️

wpdarren commented Sep 4, 2022 • edited Loading

QA Update: ⚠️

techanvil commented Sep 5, 2022

wpdarren commented Sep 6, 2022 • edited Loading

techanvil commented Sep 6, 2022

aaemnnosttv commented Sep 7, 2022

wpdarren commented Sep 9, 2022 • edited Loading

QA Update: ⚠️

wpdarren commented Sep 12, 2022

aaemnnosttv commented Sep 12, 2022

techanvil commented May 25, 2022 •

edited

Loading

wpdarren commented Sep 1, 2022 •

edited

Loading

wpdarren commented Sep 2, 2022 •

edited

Loading

wpdarren commented Sep 4, 2022 •

edited

Loading

wpdarren commented Sep 6, 2022 •

edited

Loading

wpdarren commented Sep 9, 2022 •

edited

Loading