Home > widget-integration > FilterUrlHelper > mutateHistory

FilterUrlHelper.mutateHistory() method

Updates browser history with the given URL.

Override this method to add custom behavior like analytics tracking, logging, or state management when URL changes occur.

Signature:

protected mutateHistory(behavior: "push" | "replace", urlHref: string, state?: object): void;

Parameters

Returns:

void

Remarks

This is the single point where all URL changes are committed to browser history. Extending this method allows Technical Support teams to: - Track filter changes in analytics platforms - Log URL changes for debugging - Sync URL state with external systems - Add custom state objects to history entries

Example 1

Add analytics tracking:

protected mutateHistory(
  behavior: 'push' | 'replace',
  urlHref: string,
  state: object = {}
): void {
  // Track filter changes in Google Analytics
  if (window.gtag && behavior === 'push') {
    const url = new URL(urlHref);
    const filters = Array.from(url.searchParams.entries())
      .filter(([k]) => k.startsWith('pf_'))
      .map(([k, v]) => `${k}:${v}`);

    window.gtag('event', 'filter_change', {
      filters: filters.join(','),
      page_path: url.pathname + url.search
    });
  }

  super.mutateHistory(behavior, urlHref, state);
}

Example 2

Sync with custom state management:

protected mutateHistory(
  behavior: 'push' | 'replace',
  urlHref: string,
  state: object = {}
): void {
  // Store timestamp and user info in history state
  const enhancedState = {
    ...state,
    timestamp: Date.now(),
    userId: this.getCurrentUserId()
  };

  super.mutateHistory(behavior, urlHref, enhancedState);
}