Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 https://github.com/google/site-kit-wp/issues/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.

Issue Analytics

State:
Created a year ago
Comments:12

Top GitHub Comments

2reactions

techanvilcommented, Sep 5, 2022

Having looked into it I have realised this was due to a mistake on my part in the IB for https://github.com/google/site-kit-wp/issues/5275 - which is closed and so it seems appropriate to add the fix here, although I have made a note about it on #5275.

So, I’ve created a followup PR for this issue with the fix, and also tweaked the QA Brief accordingly.

2reactions

wpdarrencommented, Sep 4, 2022

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.