Mobile Footer: accordion expansion does not fire analytics click event on some pages

[jilladams]

Description

The mobile footer should fire a Google Analytics event when user clicks to expand an accordion. This GA event is correctly firing on VA.gov mobile view, for example (screenshots below)

On Healthcare appt pre-check in and check-in error pages, this event is not firing. e.g.

• https://www.va.gov/health-care/appointment-pre-check-in/error?error=bad-token
• https://www.va.gov/health-care/appointment-check-in/error?error=bad-token

To reproduce (Need input from Product)

Success case:

• Visit https://www.va.gov
• Drag browser to mobile width
• Open Inspect dev tools window
• Click Footer Contact Us + to expand accordion
• In Developer tools, Console tab (what needs to be enabled in order to see GA click events?), see that GA click event has fired

Failure case:

• Visit https://www.va.gov/health-care/appointment-check-in/error?error=bad-token
• Drag browser to mobile width
• Open Inspect dev tools window
• Click Footer Contact Us + to expand accordion
• In Developer tools, Console tab (what needs to be enabled in order to see GA click events?), see that GA click event has NOT fired

Screenshots

1st one shows the event fire on VA.gov and the 2nd is for the check-in page and you can see there is no accordion expand event.

No click event firing on translated pages:


On standard page: click event fires


Acceptance Criteria

• [ ] Mobile footer accordions should fire a GA Event when clicked, from all pages

[wesrowe]

@ryguyk, this was raised by the Check-in team. Tagged you for pre-refinement if you have time.

[wesrowe]

Update: Per Ben Brasso this is not impeding their work. That translates to low priority for PW team.

[benbrasso-agile6]

Thanks. Following

[ryguyk]

This does not appear at first glance to be configured in code. I think it might be configured in Google Tag Manager (GTM). Do we have or can we get access?

[wesrowe]

@wesrowe refer to Michelle Dooley for consultation

[wesrowe]

@michelle-dooley, you sent this issue to Public Websites originally – please see above, we think this might be a GTM config issue. What's the next step?

[michelle-dooley]

@wesrowe and @ryguyk - this event is driven by web components that are already configured in GTM and working across other pages, so the GTM work is done, this needs FE code implementation on those 2 pages for event: int-accordion-expand and int-accordion-collapse.

[ryguyk]

Let me take a deeper look at this. My commentary above was based on an extremely brief initial dive. I had not previously engaged with these analytics.

[ryguyk]

Thanks @michelle-dooley for the additional information.

@wesrowe I've got my head around this more clearly now.

Importantly, this problem potentially goes beyond our team's purview. It might not be our issue to solve.

That said, in order to help figure out if that might be the case, I've done a little leg work to understand the issue better and outline a potential solution.

Problem details

These analytics events are set up to fire on all of our statically generated pages (i.e. pages from Drupal). They are not set up to fire on React apps (i.e. there are many more pages/apps than those initially flagged in this issue where these events are not firing).

The reason that this works on static pages but not React apps is because static-pages-entry.js calls subscribeAccordionEvents. It's very useful to note here that the accordion being used in the mobile footer is not the web component <va-accordion>. It's a Formation accordion, and that element is the one that gets wired up with the call to subscribeAccordionEvents. That function is not called from React apps.

Potential solution paths

1. Call subscribeAccordionEvents individually in each app that needs this functionality.
2. Call subscribeAccordionEvents at a higher level that is common to all apps.

On the surface, option 2 seems like the more complete approach, but I'd like to pick the brains of some engineers who are a bit more familiar with the architectural implications (i.e. Platform). The fix would not be a particularly heavy lift regardless. It just might call for a discussion with - and potentially an implementation by - the Platform team.