Skip to content

Commit

Permalink
GA4 search tracker: Track autocomplete data
Browse files Browse the repository at this point in the history
This uses the new analytics data attributes that we set in the
`search_with_autocomplete` component to enhance the `search` event we
send to GA4 with autocomplete usage data.
  • Loading branch information
csutter committed Nov 6, 2024
1 parent 3249a59 commit 3da9df9
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
}

trackSearch () {
// The original search input may have been removed from the DOM by the autocomplete component
// if it is used, so make sure we are tracking the correct input
this.$searchInput = this.$module.querySelector('input[type="search"]')

if (this.skipTracking()) return

const data = {
Expand All @@ -50,6 +54,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
text: this.searchTerm()
}

if (this.$searchInput.dataset.autocompleteTriggerInput) {
// Only set the tool_name if the autocomplete was accepted, but the other autocomplete
// attributes should be included regardless (that way we can differentiate between users
// having seen the autocomplete and not used it, and not having seen it at all)
if (this.$searchInput.dataset.autocompleteAccepted === 'true') {
data.tool_name = 'autocomplete'
}

data.length = Number(this.$searchInput.dataset.autocompleteSuggestionsCount)
data.autocomplete_input = this.$searchInput.dataset.autocompleteTriggerInput
data.autocomplete_suggestions = this.$searchInput.dataset.autocompleteSuggestions
}

window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
}

Expand Down
2 changes: 2 additions & 0 deletions docs/analytics-ga4/trackers/ga4-search-tracker.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,5 @@ When the form is submitted, a `search` event with the will be tracked containing
- the type, URL, section, index section, and index section count fields based on the data attributes
outlined above
- the state (text) of the search field contained within
- information about the user's interaction with autocomplete (if present), based on attributes set
by the `search_with_autocomplete` component
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,45 @@ describe('Google Analytics search tracking', () => {

expect(sendSpy).not.toHaveBeenCalled()
})

it('includes autocomplete information if present', () => {
input.dataset.autocompleteTriggerInput = 'i want to'
input.dataset.autocompleteSuggestions = 'i want to fish|i want to dance|i want to sleep'
input.dataset.autocompleteSuggestionsCount = '3'
input.dataset.autocompleteAccepted = 'true'

input.value = 'i want to fish'
GOVUK.triggerEvent(form, 'submit')

expect(sendSpy).toHaveBeenCalledWith(
{
event_name: 'search',
action: 'search',
type: 'site search',
section: 'section',
url: '/search',
index_section: '19',
index_section_count: '89',
text: 'i want to fish',
tool_name: 'autocomplete',
length: 3,
autocomplete_input: 'i want to',
autocomplete_suggestions: 'i want to fish|i want to dance|i want to sleep'
},
'event_data'
)
})

it('does not set tool_name if the user has not accepted a suggestion', () => {
input.dataset.autocompleteTriggerInput = 'i want to'
input.dataset.autocompleteSuggestions = 'i want to fish|i want to dance|i want to sleep'
input.dataset.autocompleteSuggestionsCount = '3'

input.value = 'i want to fish'
GOVUK.triggerEvent(form, 'submit')

expect(sendSpy.calls.mostRecent().args[0].tool_name).toBeUndefined()
})
})

describe('when the input is originally empty', () => {
Expand Down

0 comments on commit 3da9df9

Please sign in to comment.