Clientside GTM search tracking

search event

When a user types in a search phrase in a text field, a search event should be fired after a small delay, in order to track the entire search phrase. We recommend a delay of 500ms after typing in the search input field

You can add the search event to the datalayer like this:

dataLayer.push(
event:"search",
searchPhrase: "SEARCH_PHRASE_HERE"
);

 

Search field tracking example snippet

In order to wait for the user to stop typing the search query, you can set up an eventlistener on the search input field like this:

JSFiddle example

searchclick event

You should set up a click handler for the items in the search result, so when clicked, you push an event to the datalayer, containing the clicked item

Notice that the parameter with the position of the clicked element in the search result is optional.

dataLayer.push(
event:"searchclick",
searchResultClickedItem: {Object},
searchResultposition: POSITION_OF_CLICKED_ITEM (Optional)
);

 

GTM setup

If you are using the Raptor GTM template called Raptor Event Tracking here is a guide to how you can set up the search tracking. 

The template can be found in the Google Tag Manager Gallery 

Create variables for your search events datalayer

You will need the following variables, if you have followed the guide above:

  • searchPhrase
  • searchResultClickedItem
  • searchResultPosition (optional)

Add a tag for search tracking

Select the Raptor Event Tracking template

Select the event type Search

Map the searchPhrase variable to a Raptor parameter

NB: The parameter numbers (p1,p2...) can differ, depending on your implementation.

Please refer to your implementation page in the controlpanel, in order to get the exact parameters to send in this event <LINK HERE>

Add a trigger for the tag

Set up a trigger that listens for the search event you added to to the datalayer previously. 

Add a tag for searchclick tracking

Add another tag, choosing the Raptor Event Tracking Template

Select the event type Search Click

Map the clicked product to the raptor tracking, by selecting the variable you created for the clicked item

Now, add the parameters by referencing the names of the properties in the mapped object:

NB: The parameter numbers (p1,p2...) can differ, depending on your implementation.

Please refer to your implementation page in the controlpanel, in order to get the exact parameters to send in this event <LINK HERE>

Add a trigger for the tag

Set up a trigger that listens for the searchclick event you added to to the datalayer previously. 

Test the tracking

Now you are done, and you can test the tracking by entering debug mode in GTM. You can check that the trackings are being sent correctly to Raptor, be going to the Live Tracking page in our controlpanel