Implement the Search event in GA4

You can choose to track the search phrases entered by your customers. To enable this, go to the Analytics tab in the settings of the Search & Merchandising module and set the Google Analytics type to Google Tag Manager.

When enabled, every time a search term is entered, Tweakwise JS will send a virtual pageview event to Google Tag Manager. Google Tag Manager can be configured to send this event to Google Analytics:

dataLayer.push({
  event: 'Search',
  query: 'hoodie'
});

Before you begin

In some cases, it is not necessary to implement this event. GA4 has a built-in way to keep track of searches, using the query parameter. If you are using a dedicated search page, for example /search?tn_q=hoodie, you can use the Enhanced Measurement events from GA4.

To learn more, see [GA4] Enhanced measurements events and look for the Site search section.

Configure in GTM

Follow the steps below to configure Google Tag Manager to send searchphrases to Google Analytics,

Step 1: Create a variable

In Google Tag Manager, create a new variable called SearchTerm. This variable should be of type Data Layer Variable and have query as its Data Layer Variable Name.

Step 2: Create a trigger

Next, create a new trigger called Search. This trigger should be of type Custom Event and have Search as its Event name.

Step 3: Create a tag

Lastly, you need to create a new tag called Search. It should have a type of Google Analytics: GA4 Event.

Set a configuration tag or the measurement ID to connect it to your Google Analytics account.

The tag should have an event name of search and it should contain a parameter called search_term that has the value of the (earlier created) SearchTerm variable.

Note: use the "Search" correct trigger

Note: use the "Search" correct trigger

Step 4: Publish GTM

The only thing that is left is publishing your Google Tag Manager environment. After that, every time a user enters a search term a search event will be sent to your Google Analytics environment. This event will have a parameter called search_term which can be used to keep track of the search phrases.

Instant Search support

If you are using Tweakwise JS instant search, every keypress will trigger a search. This will impact search insights. We advise to use a second trigger that sends the actual event after a couple of seconds.

Step 1: Create a second trigger

A second trigger should be created with the name Search.timed. It should be of type Custom Event and have Search.timed as its Event name.

Step 2: Create a tag

Next, create a new tag called Trigger search after 3s. This tag should be of type Custom HTML and have the (previously created) Search trigger as its firing trigger. The content of the HTML should be as follows:

<script>
  (function() {
    clearTimeout(window.twSearchTimer);

    window.twSearchTimer = window.setTimeout(function() {
      window.dataLayer.push({
        'event': 'Search.timed',
        'query': {{SearchTerm}}
      });  
    }, 3000);
  })();
</script>

The final tag should look like this:

Step 3: update the original search tag

To trigger on the Search.timed tag: