Before you read this article, please note the below points:
Fired custom events count as page views in your monthly quota
Events must be configured by someone with technical skill
Wisepops does not provide support for this advanced feature. If you don't have a technical person or agency who can help you with this, we recommend reaching out to Braidr a marketing technology agency specialized in marketing data.
Introduction
The display of a popup can be triggered by a custom event. Custom events allow you to link Wisepops with any kind of user activity on your website.
Here are a few examples of custom events you can set to trigger popups:
Visitor clicks a specific button or link
Visitor adds a new product to the cart
Visitor pauses a video
Visitor selects a specific option in a menu
A download is finished
It's a mistake to use custom events to send context about the page. If you find yourself firing a custom event when the page loads, you should consider using a temporary custom property instead.
Configuring a custom event as a display trigger
A custom event can be set as a display trigger for a popup in the Display rules menu. Select On custom event (1) and then give your custom event a name (2).
Firing the custom event from your website
You can fire a custom event as soon as the Wisepops code has been executed.
wisepops("event", "my-custom-event");"event": a string that indicates that you want to fire a custom event. Leave it as it is.
"my-custom-event": the name of your custom event.
Use cases
Display a popup when the CTA of a bar is clicked
This example demonstrates how to set up a custom event that triggers a popup when a user interacts with another Wisepops campaign, such as clicking on a bar or embed.
Step 1: Configure the bar
Create or open the bar, and go to the JS callbacks section.
Add a new script, and choose the event After tracked click.
In the script area, add the following code:
wisepops("event", "Bar clicked");
This code fires a custom event named "Bar checked" when the user interacts with this campaign. You can choose any name for your custom event, but ensure it matches exactly in both the JS callback and the following popup trigger settings.
Step 2: Configure the popup
Create or open the popup campaign you want to trigger.
Go to Display rules.
Select On Custom Event as the trigger.
Enter Bar clicked as the custom event name (or whatever name you used in Step 1).
Now, when a visitor clicks on the CTA of your bar, it triggers the custom event "Bar clicked". This event then causes your popup to display, assuming all other display conditions are met. This method allows you to create a sequence of interactions, guiding users through multiple campaigns based on their actions.
After a progress bar completes
In this example, we will set up a custom event for the jQuery Progressbar completion. This is to demonstrate how Wisepops can work together with other tools.
In the Display rules menu, select On Custom Event and then enter a custom event name of your choice.
We now want to fire the custom event progress-complete once the jQuery UI progress bar widget reaches its maximum. Write something like this, right after the Wisepops setup code:
$(".selector").on("progressbarcomplete", function (evt, ui) {
wisepops("event", "progress-complete");
});
The popup will be immediately displayed if its display scenario is matched (display frequency, location targeting, etc.).
No need to use custom events for Single Page Applications (SPAs)
SPA are websites that do not reload the document when the page changes. Instead, the new content is injected into a container, and the URL is dynamically changed.
Once the page has changed, you can tell Wisepops to restart the scenario resolution by running the following JS line:
wisepops("pageview");
Debugging and troubleshooting
If the wisepops() function is not defined, please make sure that the Wisepops setup code is up-to-date.
It should start with (function(w,i,s,e).
You can view some Wisepops activity logs through the browser console.
Go to your website, where Wisepops is installed.
Open the developer tools by hitting F12, and click on the "Console" tab.
Inside the console, type wisepops("log") and hit Enter.
Not seeing your popup on your website? Try these tips.