OptinMonster JavaScript Events API

The OptinMonster JavaScript Events API is extremely powerful, providing the tools needed to further extend OptinMonster to suit your specific needs.

   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.


Event Handlers

om.Api.init

Runs once per page when the API starts.


om.Campaign.init

Runs once when campaign is initialized.

In the following example, we’ll remove the campaign if a video is playing.


om.Campaign.canLoad

Runs just after a successful check that a campaign is able to load. The campaign is not guaranteed to show.


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.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.


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.changeView

Runs right before any view is changed (e.g. Yesno to Optin).


om.Campaign.changeView.done

Runs right after any view is changed.


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 Popup campaigns.

In this example, we’ll make our Popup 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.


om.Analytics.impression

Runs any time we have tracked an impression.

In this example we’ll log a message to the console to let us know our campaign has successfully tracked an impression.


om.Analytics.conversion

Runs any time we have tracked a conversion.

In this example, we’ll use Google Tag Manager to track a specific event in our Google Analytics account. If you’re unfamiliar with Google Tag Manager consider reading The Definitive Guide to Triggering Custom Google Analytics Events Using Google Tag Manager and in Step 4 we’ll be triggering the tag event when om.Analytics.conversion fires.


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.Optin.init.submit

Runs at the start of a conversion attempting being triggered (e.g. click submit on a form before 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.


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.refresh

Runs before a campaign closes and the page refreshes based on an action.


om.Html.append.after

Runs when any single campaign is appended to the DOM.

In this example, we’ll log a message when the main campaign container has been attached to the outer DOM.