Add GA4 mapping for va-banner, va-official-gov-banner and va-promo-banner

caw310 commented 1 year ago

Description

The analytics team is needing to start connecting Google Analytics 4 (GA4) before the current Google Analytics (GA) is sunset by Google (July 1, 2024). In preparation for that cutoff date, we will need to maintain both GA and GA4 analytics tracking until eventually we are only needing to track GA4 events.

What that means for us right now is that we will need both GA and GA4 events pushed into the datalayer. All of the design system web components should already have GA events setup so we just need to map that to GA4.

Details

The work required in this ticket is to add GA4 mapping for the following components:

[x] va-banner
[x] va-official-gov-banner
[x] va-promo-banner

Updates should only be happening in vets-website in the component-library-analytics-setup.js file. The web components should already have an analytics event setup and firing. If it doesn't, please flag that as additional work.

Additional guidance on how to complete the GA4 integration

https://vfs.atlassian.net/wiki/spaces/DST/pages/2544173086/Adding+GA4+details+for+Google+Analytics

Other Details

See Michelle's GoogleSheet for additional info https://docs.google.com/spreadsheets/d/1c3Fd0f6rA0yRBeYuZEZzxzeLvJJclFUB5lX8hYPn7SY/edit?usp=sharing

Tasks

[ ] Add Data Layer Code Specifications for Interaction events for the web components
[ ] Let Michelle now this work has been done so she can test

Acceptance Criteria

[ ] Data Layer Code Specifications for Interaction events have been added and tested

jamigibbs commented 1 year ago

va-banner

{
    event: "interaction",
    component_name: "va-banner",
    custom_string_1: "component-library",
    action: "int-banner-close",
    heading_1: "Temporary closure of acute psychiatry at Lyons",
    component_version: undefined
}

jamigibbs commented 1 year ago

va-official-gov-banner

{
    event: "interaction",
    component_name: "va-official-gov-banner",
    custom_string_1: "component-library",
    action: "int-official-gov-banner-expand",
    component_version: undefined
}

{
    event: "interaction",
    component_name: "va-official-gov-banner",
    custom_string_1: "component-library",
    action: "int-official-gov-banner-collapse",
    component_version: undefined
}

jamigibbs commented 1 year ago

va-promo-banner

{
    event: "interaction",
    component_name: "va-promo-banner",
    custom_string_1: "component-library",
    action: "nav-promo-banner-link-click",
    type: "announcement",
    custom_string_2: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    component_version: undefined
}

{
    event: "interaction",
    component_name: "va-promo-banner",
    custom_string_1: "component-library",
    action: "int-promo-banner-close",
    type: "announcement",
    custom_string_2: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    component_version: undefined
}

jamigibbs commented 1 year ago

Hi @michelle-dooley! The following three web components have been added to the analytics setup file for GA4 compatibility:

https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/site-wide/component-library-analytics-setup.js

va-banner
va-official-gov-banner
va-promo-banner

I tested it locally and have commented above with the results.

department-of-veterans-affairs / vets-design-system-documentation