The OptinMonster JavaScript Events API is extremely powerful, providing the tools needed to further extend OptinMonster to suit your specific needs.
Before You Start
Here are some things to know before you begin:
- All Javascript events are asynchronous.
- All campaign IDs should use your campaign’s Unique ID.
Use
It’s that simple! You can now run your desired actions within the specified event.
What’s Available
The following will give you all information about the campaign, as well as access to public JS methods for the campaign.
The event object passes information about the event and the OptinMonster campaign. You can then access those properties within your function.
Initializing OptinMonster Events
om.Api.init
Runs once per page when the API starts.
om.Main.init
Runs once before campaigns are requested.
om.Main.parseCampaigns
Runs once after campaigns are retrieved.
Initializing a Campaign Events
om.Campaigns.init
Runs once after the document DOM is ready, when campaigns object is initialized, but before the individual campaigns are initialized.
om.Types.init
Runs while a campaign is initializing and happens after initializing the campaign type object.
om.Analytics.init
Runs while a campaign is initializing and happens after initializing the Analytics object.
om.Sites.init
Runs while a campaign is initializing and happens after initializing the Sites object, but before the sites are matched against the current campaign.
om.Html.init
Runs while a campaign is initializing and happens after initializing the Html object, and, if applicable, before the campaign holder element is attached to the DOM.
om.Iframes.init
Runs while a campaign is initializing and happens after initializing the Iframes handler object.
om.Listeners.init
Runs while a campaign is initializing and happens after initializing the Listeners object, but before the event listeners are added.
om.Lock.init
Runs while a campaign is initializing and happens after initializing the Lock content-locking handler, but before locking/unlocking happens.
om.SoundEffects.init
Runs while a campaign is initializing and happens after initializing the SoundEffects object, but before any sound-effects are played.
om.Tags.init
Runs while a campaign is initializing and while initializing the Tags smart-tags handler, but before the tags are replaced.
om.Dtr.init
Runs while a campaign is initializing and after initializing the Dtr dynamic-text-replacement handler, and after the global text-replacement functions have been called.
Showing Events
om.Campaign.init
Runs once when a campaign is initialized.
In the following example, we’ll remove the campaign if a video is playing.
om.Campaign.normalize
Runs just before any split test elements are normalized.
om.Campaign.canLoad
Runs just after a successful check that a campaign is able to load. The campaign is not guaranteed to show.
om.DisplayRules.init
Runs when the campaign wants to show, just before checking if the display rules are passing.
om.DisplayRules.afterRun
Runs after the campaign rule-check runs. Can be used to prevent the showing of a campaign even if rules pass.
om.Ruleset.init
Runs when the campaign rulesets are being processed just before determining if the Ruleset passes.
om.Group.init
Runs when the campaign rulesets are being processed just before determining if the Group in a Ruleset passes.
om.Rule.init
Runs when the campaign rulesets are being processed just before determining if the Rule in a Group in a Ruleset passes.
om.WebFonts.init
Runs when a campaign is being initiated and handles initializing the webfonts object, just before any font-loading/pre-loading occurs.
om.Html.images
Runs when a campaign is being initiated and just before any image-loading/pre-loading occurs.
om.Campaign.startShow
Happens before beginning the process of showing the campaign. Processes a couple more checks before showing, but has already passed the rules.
om.Campaign.canShow
Runs just after a successful check that a campaign can show on the page (e.g. no other campaign is currently visible).
om.Campaign.show
Runs before om.Campaign.load and before all campaign settings are initialized.
In this example, we’re going pause a video playing on the page if a certain campaign is about to show.
om.DisplayRules.actions
Runs right before any display rules actions are run for rules that have successfully passed.
om.Html.show
Runs right before the campaign form HTML is processed and appended.
om.Html.customVars
forRuns while the campaign form HTML is being processed and before the smart-tags are replaced.
om.Html.shortcodes
Runs while the campaign form HTML is being processed and just before parsing any shortcodes for output on the page.
om.Html.append.before
Runs while the campaign form HTML is being processed and just before appending it to the DOM.
om.Html.scripts
Runs while the campaign form HTML is being processed and just before processing any scripts inside the HTML and adding them to the head of the page.
om.Html.inlineScripts
Runs while the campaign form HTML is being processed, once the external scripts have finished loading, and just before we inject the inline scripts.
om.Html.append.after
Runs when the campaign form HTML has been processed and appended to the DOM.
In this example, we’ll log a message when the main campaign container has been attached to the outer DOM.
om.Form.init
Runs when the campaign form HTML has been appended to the DOM and just before initializing the campaign form attributes.
om.PoweredBy.init
Runs when the campaign form HTML has been appended to the DOM and just before creating and appending the powered-by link.
om.Styles.init
Runs when the campaign form HTML has been appended to the DOM and just before updating the campaign styles for display and before applying any monster effects.
om.Actions.init
Runs when the campaign form HTML has been appended to the DOM and just before initializing the individual action events that are attached to elements in the campaign.
om.Action.init
Runs when the campaign form HTML has been appended to the DOM and just before initializing an individual action event that is attached to elements in the campaign.
om.Countdown.init
Runs when the campaign form HTML has been appended to the DOM and just before updating any countdown elements in the campaign.
om.Campaign.load
Runs just before the campaign actually becomes visible.
In this example, we’ll write to the browser’s console a message to confirm the successful loading of our campaign.
om.Campaign.afterShow
Runs just after a campaign becomes visible.
Closing Events
om.Campaign.startClose
Runs at the start of the close function before we check for any conflicts with actually closing.
om.Campaign.close
Runs at the end of the close function just before the close happens.
In this example, we’ll redirect users to a specific url when the campaign is closed.
om.Campaign.afterClose
Runs just after the close function.
In this example, we’ll play/resume a video on the page when the campaign closes.
om.Campaign.cleanup
Runs before we set cookies, but after a close.
om.Campaign.afterCleanup
Runs after we set cookies.
Changing Views Events
om.Campaign.changeView
Runs right before any view is changed (e.g. Yes/No to Optin).
om.Campaign.changeView.done
Runs right after any view is changed.
Optin Request Events
om.Optin.init
Runs at the start of a conversion attempting being triggered (e.g. click submit on a form before we check validation)
om.Form.validate
Allows you to run custom validation rules.
om.Optin.init.submit
Runs near the end of a conversion being triggered (e.g. after we check validation)
In this example, we’ll add a custom redirect url (https://optinmonster.com/) if the subscriber uses a non-business email address such as yahoo, gmail, hotmail, etc.
om.Optin.error
Runs any time there is an error in the Optin conversion, but not during validation (e.g. MailChimp responds with test email not allowed).
In this example, we’ll redirect users to a specific url if there’s an error.
om.Optin.success
Runs after a successful conversion.
In this example, we’ll close the campaign after a successful conversion. This could be useful where the redirect url results in a direct file download and the campaign remains visible in the browser.
In this example, we’ll redirect user to a link in a new tab as well as show the success view on the campaign.
Analytics Events
om.Analytics.track
Runs any time we are tracking an impression or conversion.
In this example, we’ll log a message to the console to let us know our campaign has successfully tracked an impression or conversion.
And in this example, we’ll push the campaign name and id into the dataLayer so it can be used for parameters in a GA4 Event Tag using Google Tag Manager.
If you’re unfamiliar with Google Tag Manager, consider the following resources to learn more:
- How to Track Custom Events with Google Analytics 4
- Where’s the GA4 Config tag? (video)
- Google Tag Manager Custom Event Trigger
om.Analytics.impression
Runs any time we are attempting to track an impression. To actually know when an impression is tracked, you will need to use the om.Analytics.track
event.
om.Analytics.conversion
Runs any time we are attempting to track a conversion. To actually know when a conversion is tracked, you will need to use the om.Analytics.track
event.
Element Action Events
om.Action.redirect
Runs before a redirect action happens.
In this example, we’ll log a message in the browser’s console when the page is about to redirect to the Success URL.
om.Action.view
Runs before a view change happens based on an action.
om.Action.close
Runs before a close is supposed to happen based on an action.
In this example, we’ll close the campaign on success, then begin a direct file download.
om.Action.window
Runs before a new window is opened based on an action.
om.Action.refresh
Runs before a campaign closes and the page refreshes based on an action.
Miscellaneous Events
om.Campaign.reset
Runs when a manual campaign reset has been called. The API will never call reset itself.
om.Styles.positionPopup
Runs any time the campaign is positioned in the window. Runs only for Fullscreen and Lightbox campaigns.
In this example, we’ll make our Lightbox campaign draggable with the Dragon jQuery plugin once it’s been positioned on the page. Be sure to enqueue the required files, including jQuery. We recommend you review the readme file for the plugin.
If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!
Get Started With OptinMonster Today!BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE!
Click here to get started →