Regular Expressions for No Code Page URL Events

A Page URL is a type of trigger and filter available under an event type called No Code. When using this type of No Code option you may need to further refine how an Event is triggered in your application. A Regular Expression or RegEx can be applied to help ensure a given page is included or excluded from firing in addition to a number of other combinations.

Regular Expressions for Page URL Events

Like all events, you can view or add a Page URL Events from the Events Page in Sprig. Once there, click on the "Add" in the top right and then select "Page URL Event"

Beyond simple matching, Sprig ALSO supports Regular Expressions *(regex). Regex allows for matching or partial matching on more complex patterns.

It is important to note that by default Sprig relies on a partial match as opposed to a full match.

Let's say I add a regex pattern like this: app.sprig.com

I run the risk of allowing any partial matches. The above pattern will evaluate to TRUE for app.sprig.com/overview AND app.sprig.com/event. Partial Matches can lead to either of the following:

  • Surveys appearing on pages they are not supposed to
  • Other regex patterns not firing due to an overlap of events

️ Warning

All URL patterns must be <= 250 characters

How do we avoid this? We can use Tokens that allow us to get more granular when defining regex patterns.

Popular Tokens

While we will be unable to cover all tokens (you can find them via Google), this article will make sure to cover some of the most important ones you will find yourself needing in Sprig.

*

Definition: The * operator will match ANY all following characters

Pattern: app.sprig.com/*

ExampleMatch
app.sprig.com/eventsTrue
app.sprig.com/True
app.sprig.com/loginTrue

$

Definition: The $ operator signifies the end of the string.

Pattern: app.sprig.com/events$

ExampleMatch
app.sprig.com/eventsTrue
app.sprig.com/False

|

Definition: The | operator lets you and "OR" objection handling

Pattern: app.sprig.com/(events|overview)

ExampleMatch
app.sprig.com/eventsTrue
app.sprig.com/overviewTrue
app.sprig.com/collectionsFalse

?!

Definition: The ?! operator allows for a negative look-ahead

Pattern: app.sprig.com/(?!login|signup)

i.e. if the pattern matches the characters following ?! then evaluate to False

ExampleMatch
app.sprig.com/loginFalse
app.sprig.com/signupFalse
app.sprig.com/overviewTrue

A-Z and a-z

Definition: The a-z operator matches any character a-z, the A-Z operator matches any character from A-Z (capitalized)

Pattern: app.sprig.com/[a-z]

ExampleMatch
app.sprig.com/overiviewTrue
app.sprig.com/eventsTrue
app.sprig.com/EventsFalse

How to Test Your Regex

You can test whether or not your regex function works as intended by copy and pasting the snippet below into your web developer console:

The snippet below will either evaluate to TRUE or FALSE.

new RegExp("sample.com").test(window.location.href)

📘

Info

Replace sample.com with your own regex pattern