When using Page Definition to assign clear names to URLs or grouping similar pages based on the Page type (e.g., identifying all album pages as “Album Page”), you rely on matching URL patterns. These patterns might include dynamic segments, for instance:

https://open.spotify.com/album/{AlbumID}

In this case, all URLs beginning with https://open.spotify.com/album/ followed by any string will be recognized as an Album Page.

However, problems arise when multiple different types of pages share the same URL structure and have dynamic path parameters. For example:

https://open.spotify.com/album/3z2D8SA7g9trHTh3pawZFl (Album Page)
https://open.spotify.com/artist/34554d95gkawZFl (Artist Page)

If not handled properly, these pages may get lumped together under the same rule, leading to incorrect tracking or misclassification.

Possible conflicting scenarios

A possible issue might occur when you have URLs that follow the exact same structure.

E.g. if you have the following URLs:

https://open.spotify.com/{AlbumID}

https://open.spotify.com/{ArtistID}

https://open.spotify.com/Podcasts

And you define a pattern like:

https://open.spotify.com/{DynamicValue}

This is too broad and may unintentionally match all of these pages:

Album Pages
Artist Pages
Static pages like /podcasts

This results in overlapping rules, where multiple page types are categorized under a single definition.

How to solve it?

Solution 1: Exact match for static pages

For URLs without dynamic values (e.g., https://open.spotify.com/podcasts), the solution is simple:

Create an exact match rule.
Do not select any dynamic part.
Assign a high priority to this rule.

This ensures static pages aren’t incorrectly grouped with dynamic ones.

Solution 2: For dynamic pages, modify the URL structure using the occlusion function

When different dynamic URLs share the same path structure and have dynamic values (e.g., open.spotify.com/{album-ID} vs.open.spotify.com/{artist-ID}), use the occlusion function to modify the URLs when they’re sent to UXCam.

You can prepend a prefix to help distinguish between page types:

occlusion: {
  url: function(url) {
    const modifiedURL = new URL(url);
    if (isArtist) {
      modifiedURL.pathname = '/artist' + modifiedURL.pathname;
    } else if (isAlbum) {
      modifiedURL.pathname = '/album' + modifiedURL.pathname;
    }
    return modifiedURL.toString();
  }
}

✏️ Note: isArtist and isAlbum must be determined based on your app’s context (e.g., based on metadata or routing).

Result after modification

After applying this function, URLs will appear in UXCam like:

Album: https://open.spotify.com/album/{AlbumID}
Artist: https://open.spotify.com/artist/{ArtistID}

This allows you to create distinct Page Definitions:

One for /album/{AlbumID}
One for /artist/{ArtistID}

No more conflicting rules. ✅

Define pages & properties to simplify data

Resolving conflicting Page Definition rules for similar URL structures with dynamic values

Possible conflicting scenarios

How to solve it?

Solution 1: Exact match for static pages

Solution 2: For dynamic pages, modify the URL structure using the occlusion function

Result after modification