No Code Events

No-Code Events

No-Code events provide a way to configure Sprig to trigger Web studies without having to edit the source code on the server. No-Code events only support deploying Web-based studies. Code Events may be used for web and Mobile studies using the appropriate SDK, API, or Integration.

There are two main types of No-Code Events:

• URL Events: Triggers when a user visits a page whose URL matches a defined pattern.
• Interactive Events: Triggers when a user clicks a specific element on the page, identified by a CSS selector or inner text.

Note: All No-Code Events require a URL match- regardless of whether the event is URL-based or interactive. This ensures Sprig knows which page the user will be on when or before the event triggers. This enables customers to create no-code events for common scenarios (for example, pressing a button that says “Finish”) while maintaining governance over exactly where on the website the no-code event should trigger (for example, if there are multiple pages on the website with buttons labeled “Finish”).

URL Events

URL Events trigger studies such as In-Product Surveys, Feedback, Replays, and Heatmaps when a user visits a page that matches a defined URL pattern. Your Sprig SDK must be installed on the same page that you are targeting with the URL. For more information, see here.

Note: Some study types, like Heatmaps and Feedback, require a URL Event rather than an Interactive or Code event.

Interactive Events

Interactive events require a user to click on a specific element on a webpage or web application. They are available for In-Product and Replay web studies (alongside Code events and URL events).

You can specify the target element using either inner text or a CSS selector.

For example, to trigger a survey when a user clicks this button:
<button id="fireButton">Click Me</button>

You could use either inner text or a CSS selector, depending on your use case and web architecture:

• CSS selector: #fireButton
• Inner text: Click Me

Note: the presence of the element in the DOM is not sufficient for the event to be triggered; the user must click on the element.

📘

Info

No-Code events are triggered when a specific condition is met (for example, when the current page URL matches a string you have defined). On page load, the system triggers the first event that matches that specific condition. If you have other No-code events with that same trigger condition, the system will not trigger those other events. For more information, see here.

Adding No-Code Events:

Prerequisite: choose a page or a button on your website or web application.

• Keep that page open as you navigate to the following steps; you will need to copy information from this page into the Sprig app. You may want to open the browser Inspect window if you intend to use the CSS selection method.

There are two ways to create a No-Code Events from within the Sprig UI. You can either:

• Configure a reusable event in the Sprig dashboard on the Events tab (Select Add Event)
• Create a reusable event during study creation in the Targeting module (Select Add Event or URL)

For a URL Events: you can configure the URL and matching pattern directly within the targeting module by selecting "URL".

• Note that URL events created here won’t begin tracking activity until the study is launched, and the event will appear as a “Draft URL Event” in the study details until launch.
• Once launched, a default naming convention "URL Event 1 for Study XXXXXX" will be applied and the event will appear in the Events tab. The event name can be renamed here and given a description as well.

For Interactive Events: you can configure the event by selecting "Add Event" and then "New Event" from within the event selection dropdown

When creating a new No-Code Event, a URL is crucial to assure proper event instrumentation. Sprig supports several different ways to match URLs. For more information on page URL matching click here.

After you have added in the URL and/or Interactive element- you can add additional context to the event to help users understand how the event functions:

• Display Name field, to enter the Event name
• Description field, to enter the Event description

Finally, you can test your no-code event to assure proper instrumentation.

• Once you have entered the URL string, enter the URL you are trying to match in the Test Your Event field and click Test Event to test if the string you entered matches the URL.
  • Open your browser's JavaScript console in your browser and make sure you are on the correct page.
  • Paste the code snippet into the console and hit Enter.
  • If successful, the element information will be displayed in the console.

Testing the Event

Key Considerations

1. Web-only: No-Code Events support web studies only and cannot trigger mobile studies.
2. One per page: Sprig can track only one No-Code URL Event per page. If multiple could fire, Sprig uses priority ordering. For more information, see here.
3. Active studies take precedence: Events linked to active studies override events not currently used in an active study.
4. No-code event limitations: If there are multiple elements on the same page that cannot be distinguished from one another through either inner text or CSS, a code event may be required.
5. Dismiss on Page Change. This is a product-wide setting that is important for understanding no-code event behavior:
   • When enabled: The survey appears only if the user stays on the same URL that triggered the survey
   • When disabled: The survey appears even if the user navigates to a different page after triggering the event
6. Preview behavior: No-Code Events can trigger surveys in preview mode, by selecting "Preview on your website" but only if the study is a draft or actively running (ie. in-progress). Studies that are paused cannot generate live previews, even if the event is still tracking activity.
7. Inner text triggers may not work with elements inside a closed shadow DOM or dynamically rendered content.
8. URL events are treated separately from interactive element events, but event overlap may occur with multiple no-code events on a single page.