Track 'Start now' buttons with a specific GA4 type #3935
Conversation
| @@ -46,7 +46,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics | |||
| } | |||
|
|
|||
| // Code below ensures the tracker plays nicely with the other link tracker | |||
| var otherLinkTracker = element.closest('[data-ga4-link]') | |||
| // might have data-ga4-link on the link, so start 'closest' on the parent | |||
| var otherLinkTracker = element.parentElement.closest('[data-ga4-link]') | |||
There was a problem hiding this comment.
Changing this to the parentElement breaks our link tracking - links themselves that are being tracked by the other tracker can have data-ga4-link directly on them, instead of on their parent, which I think may be the issue here.
If you render this HTML somewhere (i put it in layout_for_public):
<%= render "govuk_publishing_components/components/govspeak", {} do %>
<div class="call-to-action">
<p><a href="https://google.com">This callout link should be tracked by the regular link tracker</a></p>
<section class="gem-c-attachment govuk-!-display-none-print govuk-!-margin-bottom-6" data-module="ga4-link-tracker">
<div class="gem-c-attachment__details">
<h2 class="gem-c-attachment__title">
<a class="govuk-link gem-c-attachment__link" target="_self" data-ga4-link="{"event_name":"navigation","type":"attachment"}" href="/government/publications/equality-act-guidance/individuals-a-summary-guide-to-your-rights-html">This attachment link should be tracked by the regular link tracker</a>
</h2>
</div>
</section>
</div>
<section class="gem-c-attachment govuk-!-display-none-print govuk-!-margin-bottom-6" data-module="ga4-link-tracker">
<div class="gem-c-attachment__details">
<h2 class="gem-c-attachment__title">
<a class="govuk-link gem-c-attachment__link" target="_self" data-ga4-link="{"event_name":"navigation","type":"attachment"}" href="/government/publications/equality-act-guidance/individuals-a-summary-guide-to-your-rights-html">This attachment link should also be tracked by the regular link tracker</a>
</h2>
</div>
</section>
<p><a href="https://google.com">This generic link should be tracked by the specialist link tracker</a></p>
<p><a href="https://assets.publishing.service.gov.uk/media/5a78ff28ed915d0422066fb6/individual-rights1.pdf">This file download should be tracked by the specialist link tracker</a></p>
<p><a href="mailto:email@example.com">This email should be tracked by the specialist link tracker</a></p>
<% end %>The third link is being tracked twice.
data-ga4-link was the thing we were using to determine whether something was being tracked by the other link tracker and was essentially the flag to stop this tracker running, and now that they both use data-ga4-link tracker I'm worried that it might break more things. I think this might be a bit hard to surface with unit tests as I guess unit tests will be mostly testing each tracker in isolation, instead of when they are mixed together. Maybe it's safer to use a new attribute instead of data-ga4-link?
Thanks 👍
There was a problem hiding this comment.
Good spot @AshGDS thanks for that. I'll have a re-think.
There was a problem hiding this comment.
Have reworked it to use data-ga4-attributes instead.
- add a custom GA4 attribute to be picked up by the link tracker for the 'start now' variant of the button component
- for external links such as 'Start now' buttons, we want the specialist link tracker to be able to pick up an alternative value for 'type' from the `data-ga4-attributes` attribute on the link
What
Modifies the button component and the specialist link tracker to allow for a
data-ga4-linkattribute to be read, containing an alternativetypefor the GA4 data.This includes a change to the button component, where 'Start now' buttons automatically include this attribute (which can also be removed using a
disable_ga4option if required). And a change to the specialist link tracker, to check for the presence of adata-ga4-linkattribute and read it if found.This could probably be made more generic to allow more attributes than just
typeto be overridden, but this is the current requirement.Why
Tracking of 'Start now' buttons (on pages like https://www.gov.uk/log-in-register-hmrc-online-services) is done automatically by the specialist link tracker, as an external link. We want to be able to uniquely identify these buttons from other external link tracking, by changing the
typefromgeneric linktostart button.Visual Changes
None.
Trello card: https://trello.com/c/DqWUObIj/803-add-tracking-start-buttons