Improve Your Standard Site Search Tracking with Custom Search Events

Introduction

Tracking search functionality on your website provides valuable insights into user interaction patterns. By enriching your site search tracking with information such as search results, you can identify content and products users are interested in but can’t find on your website.

When implemented properly, search tracking helps you:

• Understand what users are looking for
• Identify potential gaps in your content or product offerings
• Optimize your site’s search functionality
• Improve overall user experience and conversion rates

Key Parameters to Track

Let’s analyze the parameters you can add to gather these new insights:

Parameter	Type	Description	Example
SearchTerm	string	Term used in search bar	T-shirt
SearchResults	string	Total search results	10
SearchQuery	string	Query parameter used in the URL	search=
SearchParameters	string	Additional search criteria	age=30-50

Data Layer Structure

The ideal way to implement search tracking is through a consistent data layer structure. Here’s how it should look:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "site_search",
  searchTerm: "T-shirt",
  searchResults: "10",
  searchQuery: "search=",
  searchParameters: "age=30-50",
});

Implementation Options

With Developer Support

If you have developer support, use the data layer structure above and ask the development team to populate this information when a search event occurs (either on page load of the search results page or on click when performing the search).

This approach offers several advantages:

• More reliable data collection
• Better performance
• Easier maintenance
• Access to server-side information

Without Developer Support

While developer implementation is highly recommended for any custom tracking, if you must implement search tracking manually using only Google Tag Manager, follow these steps for each parameter:

Custom JavaScript Variables for GTM

1. Search Term

This function extracts the search term from common URL parameters while also removing potential PII:

function() {
  // Function to get URL parameters
  function getURLParameter(name) {
    var searchString = window.location.search.substring(1);
    var params = searchString.split('&');

    for (var i = 0; i < params.length; i++) {
      var pair = params[i].split('=');

      // Decode parameter name to handle encoded characters
      var paramName = decodeURIComponent(pair[0] || '');

      // Find search parameters (q, query, search, term, etc.)
      if (paramName === name ||
          paramName === 'q' ||
          paramName === 'query' ||
          paramName === 'search' ||
          paramName === 'term') {
        // Decode the value and prevent PII issues by removing emails, etc.
        var value = decodeURIComponent(pair[1] || '');
        // Remove potential PII like emails
        value = value.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, '[EMAIL REMOVED]');
        return value;
      }
    }
    return '';
  }

  // Try common search parameter names
  var searchParam = getURLParameter('q') ||
                    getURLParameter('query') ||
                    getURLParameter('search') ||
                    getURLParameter('term') ||
                    '';

  return searchParam;
}

Key configuration points:

• Parameter detection: Automatically checks for common search parameters (q, query, search, term)
• URL decoding: Handles URL-encoded characters (like %20 for spaces)
• PII removal: Automatically redacts email addresses
• Customization options:
  • Add additional parameter names to check by adding them to the if condition
  • Enhance PII filtering by adding more regex patterns for phone numbers, etc.
  • Adjust the priority order in the final assignment statement

2. Search Results

This function counts elements matching a specific selector on your search results page:

function() {
  // Define the selector for search results - customize this for your site
  var resultSelector = '.search-result'; // Change this to match your site's structure

  // Count the elements matching the selector
  var elements = document.querySelectorAll(resultSelector);
  var resultCount = elements ? elements.length : 0;

  return resultCount.toString();
}

Key configuration points:

• Selector customization: Replace .search-result with the actual selector used on your website:
  • For class-based selectors: .your-result-class or .results-container .item
  • For ID-based selectors: #search-results or #results-container .item
  • For data attributes: [data-search-result] or [data-result-item]
  • For complex structures: .search-page .results-grid .product-card
• Performance considerations:
  • Use the most specific selector possible to avoid false matches
  • Test in different browsers to ensure consistent results
  • Consider adding a fallback counter for dynamic content loading

3. Search Query

This function identifies which search parameter is being used in your URL:

function() {
  // Function to extract the search query parameter name
  function getSearchQueryName() {
    var searchString = window.location.search.substring(1);
    var params = searchString.split('&');
    var searchParams = ['q', 'query', 'search', 'term', 'searchterm', 'keyword'];

    for (var i = 0; i < params.length; i++) {
      var pair = params[i].split('=');
      // Decode the parameter name to handle URL encoding
      var paramName = decodeURIComponent(pair[0] || '');

      for (var j = 0; j < searchParams.length; j++) {
        if (paramName === searchParams[j]) {
          return paramName + '=';
        }
      }
    }
    return '';
  }

  return getSearchQueryName();
}

Key configuration points:

• Parameter detection: Looks for common search parameter names in the URL
• URL decoding: Handles URL-encoded characters in parameter names
• Customization options:
  • Modify the searchParams array to include/exclude specific parameters for your site
  • Add your site’s custom search parameter names (e.g., ‘s’, ‘find’, ‘lookup’)
  • Adjust parameter priority by reordering the array (first match wins)
• Use cases:
  • Identify which search mechanism users are using when multiple search options exist
  • Track different search sources or types across your site

4. Search Parameters

Choose one of these options based on your needs:

Option 1: Get One Specific Parameter

function() {
  // Function to get a specific parameter (e.g., 'category')
  // Change 'category' to the parameter name you want to track
  function getSpecificParameter(paramName) {
    var searchString = window.location.search.substring(1);
    var params = searchString.split('&');

    for (var i = 0; i < params.length; i++) {
      var pair = params[i].split('=');
      // Decode the parameter name to handle URL encoding
      var paramName1 = decodeURIComponent(pair[0] || '');

      if (paramName1 === paramName) {
        var value = decodeURIComponent(pair[1] || '');
        // Remove potential PII like emails
        value = value.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, '[EMAIL REMOVED]');

        return paramName1 + '=' + value;
      }
    }
    return '';
  }

  // Get a specific parameter (e.g., 'category')
  return getSpecificParameter('category'); // Change 'category' to your parameter
}

Key configuration points for Option 1:

• Target parameter: Change 'category' to the exact parameter name you want to track
• URL decoding: Automatically handles URL-encoded values
• Return format: Returns “name=value” format (e.g., “category=electronics”)
• Common parameters to consider tracking:
  • Product categories: category, department, type
  • Filters: size, color, price, brand
  • Sorting: sort, order, sort_by
  • Pagination: page, limit, per_page

Option 2: Get All Parameters Concatenated

function() {
  // Function to get all parameters as a concatenated string
  function getAllParameters() {
    var searchString = window.location.search.substring(1);
    var params = searchString.split('&');
    var searchParams = ['q', 'query', 'search', 'term', 'searchterm', 'keyword'];
    var additionalParams = [];

    for (var i = 0; i < params.length; i++) {
      var pair = params[i].split('=');
      // Decode the parameter name to handle URL encoding
      var paramName = decodeURIComponent(pair[0] || '');

      // Skip the main search parameters
      var isMainParam = false;
      for (var j = 0; j < searchParams.length; j++) {
        if (paramName === searchParams[j]) {
          isMainParam = true;
          break;
        }
      }

      if (!isMainParam && paramName && pair[1]) {
        var value = decodeURIComponent(pair[1] || '');
        // Remove potential PII like emails
        value = value.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, '[EMAIL REMOVED]');

        additionalParams.push(paramName + '=' + value);
      }
    }

    return additionalParams.join(',');
  }

  return getAllParameters();
}

Key configuration points for Option 2:

• Exclusion list: Modify the searchParams array to exclude primary search parameters
• URL decoding: Handles URL-encoded characters for both names and values
• Return format: Returns comma-separated list (e.g., “category=electronics,price=100-200,color=red”)
• Data processing considerations:
  • Set a reasonable character limit (some analytics platforms limit dimension length)
  • Consider creating separate variables for high-value parameters
  • Review parameter data regularly to identify new filtering patterns

Implementation Steps in GTM

1. Create Custom JavaScript Variables in GTM:

   • Navigate to Variables > New > Custom JavaScript
   • Create four variables with appropriate names (e.g., “JS - Search Term”, “JS - Search Results”, etc.)
   • Copy each function into its respective variable

2. Create a Trigger:

   • Create a Custom Event trigger for ‘site_search’ if your developers are pushing the event
   • Or use a Page View trigger that targets search results pages (e.g., URL contains “/search” or similar)

3. Create a GA4 Event Tag:

   • Set up a GA4 event tag for the “search” event
   • Include the four variables as event parameters
   • Configure the tag to fire on your search trigger

4. Test Your Implementation:

   • Use GTM’s Preview mode to ensure all variables are populating correctly
   • Perform test searches with different terms and filters
   • Verify the data is being sent correctly to GA4

Privacy Considerations

For GDPR compliance, ensure you’re not storing any personally identifiable information (PII). The SearchTerm function above includes basic PII redaction for email addresses. Consider implementing additional redaction for other types of PII if needed.

Some types of PII to watch for in search terms:

• Email addresses (already handled in our code)
• Phone numbers
• Social security numbers
• Credit card numbers
• Names when combined with other identifiers

Benefits of Enhanced Search Tracking

Implementing comprehensive search tracking provides several benefits:

• Identify high-demand products or content that users are searching for but can’t find
• Uncover search patterns and terminology your users actually use
• Optimize your site’s navigation based on common search behaviors
• Improve your internal search algorithm by understanding which searches lead to zero results
• Create content or add products based on demonstrated user interest

By implementing these tracking methods, you’ll gain valuable insights into how users search your site, what they’re looking for, and potentially identify opportunities to improve your content and search functionality.