Query Param Passthrough

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

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.

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.