Query Param Passthrough

Automatically pass through querystring params from the current page, as users navigate through your site.

IMPORTANT This feature was designed to provide a quick and dirty solution for very simplistic referral tracking setups. It hijacks standard link clicks and modifies them to support query param passthrough.

There's a huge caveat to this approach - Urls can contain a lot of information, and browsers can vary in how they process Urls. While this solution supports most basic scenarios, make certain to test your primary navigation and CTA links, in particular anything with a complex formation, query params, and hash fragments.

Query param passthrough is not the approach that Sygnal uses for enterprise-grade referral tracking, which has a lot of other considrations such as the ability to remember referrals on a repeat-visit within 30 days.

If this library does not work for your use case or you need a more robust, feature-rich solution, contact us for a custom solution .

Features

• Automatically detects querystring params on your page, and applies them to links within the page so that that data is passed through during navigation

• Dynamic- handles links created and loaded by scripts or AJAX just as efficiently as static links

• Ignores mailto: and tel: links automatically

Options;

• Ignore specific page querystring params, such as Webflow's pagination params

• Apply the page's querystring params to external links as well

Use Cases

• Pass UTM tracking params from the landing page, as the user navigates through the site. This allows you to track them in analytics tools, and capture them when the user submits a form.

  • See SA5's Data-binding features for no-code binding of querystring params to form inputs.

• Pass your custom referrer-tracking params in the same way

Demonstration

Querystring Params

Url Query Params & Navigation - WebflowUrl Query Params & Navigation

Configuration

This library has extensive configuration options.

All SA5 Url lib features are handled in a single urlConfig configuration block, however feature-specific configurations are represented as sub objects. Typically you can enable or disable a feature, and provide a custom configuration if you choose.

Here are the configuration options for Query param passthrough;

<!-- Sygnal Attributes 5 | Url | Config -->
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['urlConfig', 
  (config) => {
    config.passthrough = true;
    config.passthroughConfig = {
      ignorePatterns: ["ignore", /_page$/],
      overwriteExisting: true,
      internalOnly: false
    };
    return config;
  }]); 
</script>

passthrough = true | false

Defaults to false.

Enables or disables query param passthrough.

Unless you enable this, the entire querystring passthrough feature is disabled by default.

passthroughConfig

Specifies query param passthrough config options.

A primary role of the SA5 passthrough handler is to merge the current page's querystring params into relevant links. This config allows you to determine how that occurs- some page level params should be ignored, others may or may not take precedence over the link's own params.

passthroughConfig.ignorePatterns

Defines which page querystring param keys to ignore, for example, this configuration will not pass through param keys of ignore or Webflow's pagination params like j2l89skd_page.

config.passthroughConfig = {
  ignorePatterns: ["ignore", /_page$/]
};

You can have as many ignore patterns as you like, and can specify both literal strings and use regex strings for complex querystring key pattern-matching.

Defaults to [ /_page$/ ].

Not thoroughly tested, but you should also be able to do add and remove operations like;

config.passthroughConfig.ignorePatterns.push("ignore");

passthroughConfig.overwriteExisting = true | false

If a link already has a param with this name, this setting determines whether a querystring param with the same name will overwrite it.

Defaults to false.

passthroughConfig.internalOnly = true | false

Determines whether the page's querystring params are applied to internal links only, or external links as well.

Defaults to true.

Attributes

These attributes can be placed directly on any link element for special behavior.

wfu-query-passthrough = ( setting )

• ignore = this link will be ignored for query param passthrough

Getting Started ( LOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Add your Configuration Callback

Add this configuration section above right after the library in your before HEAD custom code. Typically this will be in the site-wide custom code configuration.