Simplify the way ga4 tracking is added to accordions

[AshGDS]

Hi @andysellick / @JamesCGDS

Would you be able to review this? Thanks 👍

What

Previously we were passing a GTM object to each accordion's render statement inside of a frontend app's template. See an example here:
https://github.com/alphagov/collections/blob/2304bf53592f39e35270413fdb27c00c7cb3190a/app/views/world_wide_taxons/accordion.html.erb#L31

Instead, it's simpler to just pass a boolean - ga4_tracking: true - in the accordion render of these frontend apps, and then we handle the GTM object in one place inside of govuk_publishing_components instead.

We were also using the accordion's class to check wether we tracked aria-expanded. We are now using a data attribute for this, called data-ga4-expandable

This isn't a breaking change as the old code is still in the repo, as that code was used to add some new UA tracking so we have to leave it in.

Why

• This gives us the benefit of only having to maintain our GTM object in one repo, and we won't have to modify templates in multiple frontend apps if our GTM schema changes.
• Reduces technical debt
• Now only uses data-ga4- attributes which is better.

Visual Changes

None.

[andysellick]

My brain's gone a bit foggy this afternoon so this might not be particularly thorough or coherent, but looks good, like the approach, this will definitely save us some effort - just a few comments.

[AshGDS]

Thanks @andysellick @JamesCGDS - I think I've resolved the changes you requested, feel free to re-review when you have a chance. Will squash the commits once everything is approved 👍

[andysellick]

Instead of passing these attributes to the component and then moving them onto the showall button, couldn't we just hardcode them? Something like this:

// look for data attributes to put onto the 'show/hide all' link
var showAll = this.$module.querySelector(this.showAllControls)
var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
if (showAllAttributes) {
  try {
    var values = JSON.parse(showAllAttributes)
    var keys = Object.keys(values)
    for (var i = 0; i < keys.length; i++) {
      showAll.setAttribute('data-' + keys[i], values[keys[i]])
    }
  } catch (e) {
    console.error('Could not read accordion data attributes error: ' + e.message, window.location)
  }
}

// if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
var isGa4Enabled = this.$module.hasAttribute('data-ga4-expandable')
if (isGa4Enabled) {
  var indexTotal = this.$module.querySelectorAll('.govuk-accordion__section').length
  var showAllAttributesGa4 = {"event_name":"select_content","type":"accordion","index":0,"index_total": indexTotal}
  showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
}

[AshGDS]

Thanks @andysellick - I've added this change and then will move it to ga4-core.js once the link tracker PR is merged.

[andysellick]

Does this still need moving to ga4-core.js? I can't think what else will need this right now. Maybe move it later when we need it, shouldn't have to block this PR.

[AshGDS]

This is due to ga4-core not being initialised in govuk_publishing_components, so the accordion would crash on the developer frontend which showcases the component. Therefore we decided to share the function at a later date.

[JamesCGDS]

Looks good to me 👍

[andysellick]

Nice work. Just two minor documentation comments then I think we're good to go 👍

[andysellick]

Is it worth adding a link to these docs here?

[andysellick]

I think this now only applies (or is needed) for UA instead of GA4? Is it worth clarifying this here?