Add Origin Tracking Parameters (f_param) to Storefront URL

Urchin Tracking Module (UTM) parameters are standardized tags added to URLs to track the source, medium, campaign, and context of website traffic. By attaching these parameters, you can identify how users discover your products, which campaigns lead to clicks, and the context of each visit. UTM parameters have become the industry standard for tracking marketing campaigns and user acquisition sources.

Fynd uses a custom UTM tracking to capture more granular details about user journeys within its ecosystem. Unlike standard UTM parameters, Fynd’s system utilizes specific query parameters (sometimes bundled as a single encoded parameter called f_param) to simplify management and tightly integrate tracking data with Fynd's platform features. These custom parameters are connected to FPI event analytics, providing deeper insights into user interactions on your storefront.

This page first covers what UTM parameters are and how they’re used in general marketing contexts. It then explains Fynd’s custom origin tracking approach, how to implement these parameters in your product URLs, and provides practical examples to ensure effective integration in your storefront.

Benefits

By using f_param parameters, you can:

• Identify where users found products (wishlist, collection, search, extension)
• Understand how product position affects clicks and conversions
• Get better insights across extensions and storefront experiences

List of Parameters

The following parameters (f_param) are available in FPI events:

Parameter	Description
f_source	The source of the click (e.g., wishlist, collection, search, extension)
f_medium	Custom channel identifier
f_campaign	Campaign name
f_content	Placement or creative variant (typically the item index or position)
f_term	Keyword or target term (commonly used for search)
f_id	Contextual identifier such as collection slug, category, campaign ID, or extension name
f_source_platform	Data or advertising platform
f_creative_format	Creative format information
f_marketing_tactic	Marketing tactic used

Add these parameters to product objects before rendering product links in your storefront. This applies to product listings in collections, search results, wishlists, category pages, and any other context where products are displayed.

Required Parameters

While all parameters are available, some are required for effective tracking. Every product URL must include the relevant origin-tracking parameters. At a minimum, always include:

• f_source: Identifies where the user came from
• f_id: Provides context (include when a contextual identifier is available)
• f_content: Tracks position or placement (for position-level tracking)

To add origin-tracking information, include the parameters in action.page.query. Modify the action.page.query object for each product in your product list. The exact implementation depends on your framework (for example, React), but the general pattern is to set these parameters when mapping or iterating over product arrays.

action.page.query = {
  f_source: 'collection',
  f_id: 'summer-collection',
  f_content: '1'
};

When the user clicks the product link, these parameters are automatically converted to URL query parameters:

/product/123?f_source=collection&f_id=summer-collection&f_content=1

note

These parameters are accessible via router.filterQuery and can be sent to the FPI events system for analytics. The router.filterQuery is the parsed query string from the URL, provided as an object for easy access in your components and server-side functions.

Example

When the product page opens, this URL is automatically converted to URL query parameters:

/product/summer-dress?f_source=collection&f_id=summer-collection&f_content=1&f_medium=banner&f_campaign=summer_2024

Here's how these parameters look in a product object:

{
  product: {
    uid: "product-123",
    name: "Summer Dress",
    slug: "summer-dress",
    action: {
      page: {
        type: "product",
        query: {
          f_source: 'collection',
          f_id: 'summer-collection',
          f_content: '1',
          f_medium: 'banner',
          f_campaign: 'summer_2024'
        }
      }
    }
  }
}

Best Practices

Parameter Priority

If you cannot include all parameters, prioritize them in this order:

1. f_source: Identifies where the user came from (most important)
2. f_id: Links the click to contextual information
3. f_content: Tracks the position or placement

URL Encoding

If parameter values contain special characters (such as spaces, ampersands, or hash symbols), you must URL-encode them.

Raw Value	Encoded Value
spring sale	spring%20sale
A & B	A%20%26%20B
collection#1	collection%231

Correct

/product/123?f_campaign=spring%20sale&f_source=collection

Incorrect

/product/123?f_campaign=spring sale&f_source=collection

Common Use Cases

The following examples show how to use UTM parameters in different contexts.

1. Wishlist

When a user clicks a product from a wishlist, the following UTM parameters help track the source and context of the click:

/product/123?f_source=wishlist&f_id=collectionType&f_content=1

• f_source=wishlist: Indicates that the user clicked this product from their wishlist.
• f_id=collectionType: Represents the wishlist's collection type or identifier (such as "custom-list" or a unique wishlist ID).
• f_content=1: The position of the item within the wishlist (e.g., first item).

action.page.query = {
  f_source: 'wishlist',
  f_id: 'collectionType', // Collection type or identifier
  f_content: '1' // Item position in the wishlist
};

2. Collection

When a user clicks a product from a collection page, these parameters explain the context of the click:

action.page.query = {
  f_source: 'collection',      // Click originated from a collection listing page
  f_id: 'summer-collection',   // The specific collection or campaign identifier
  f_content: '1'               // The item's position in the collection (e.g., first product)
};

Resulting URL

/product/456?f_source=collection&f_id=summer-collection&f_content=1

3. Search

When a user clicks a product from search results, UTM parameters capture source, search term, and click position:

action.page.query = {
  f_source: 'search',       // User arrived from a search results page
  f_content: '1',           // Position of the item in the search result list
  f_term: 'shoes'           // Search keyword that led to this result
};

Resulting URL

/product/789?f_source=search&f_content=1&f_term=shoes