[Analytics] [Vet Center pages (map)] Custom & Dupe GA events removal & web component upgrades

[randimays]

Status

[2024-07-22] [Fran] Duplicative events need to be removed. This ticket should be prioritized.

Description

The va-link web component's analytics now include link destination, and va-link-action has been released to the component library. We can now use baked-in analytics on the Resources & Support detail pages.

Example page: https://www.va.gov/bangor-vet-center/locations -> Other nearby Vet Centers

Engineering notes

The link is under "Locations and contact information" in the above URL. As a reminder, per the design system guidelines, links should only open in a new tab if they result in the user losing progress or data (such as in a form flow). This Google Maps link should not open in a new tab anymore.

Code: https://github.com/department-of-veterans-affairs/vets-website/blob/d1c5684083334b52b1eb21a0bbb222aa5d53707f/src/applications/static-pages/facilities/vet-center/components/GoogleMapsLink.jsx#L9

User story

AS A PO/PM managing Sitewide products & features I WANT to (where appropriate) adopt the va-link or va-link-action component, its baked-in analytics, and remove the custom GA events SO THAT extraneous code is removed and only the events needed will be triggered.

Acceptance criteria

• [x] Element: "Get directions on Google maps" link
  • [x] convert to web component
  • [x] enable component's baked-in analytics
  • [x] remove custom events
• [ ] a11y review

[laflannery]

I commented on the PR but I am unclear if this ticket is needed because the Get Directions link is already a va-link component.

However, looking more closely at the ticket, the title says "Map", is this referring to the actual map image, not the Get Directions link?

[randimays]

@laflannery I updated the ticket description with a more specific link; sorry for the misdirection!

[laflannery]

Ah, Thanks!

[eselkin]

Only the nav-link-click from DST component is triggered

[FranECross]

@eselkin Quick question... using Adswerve & developer tools, when I click the link 'Get directions on Google Maps' under 'Other nearby Vet Centers, I see what looks like three events. The top event you show in the screenshot above 'Event: gtm.click', the 'Event: nav-click-link you expanded', and then if you wait a few seconds without doing anything, I see the 'GA4 event: link_click' (screenshot below). Is this an extra event that needs to be removed? This is on Prod. cc @jilladams

[eselkin]

If you open the GA4 event it is the ep.dle_name: "nav-link-click" that fires the event Basically all the dataLayer things get consolidated into an event either as batch or alone. If there were multiple dataLayer contents added multiple GA4 events would happen. But here the click is a standard event that just gets added to all clicks and nav-link-click is the actual event.