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.

NOTE: all events are asynchronous.

Use

or

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.


Function Objects

  • event – the JavaScript Event object being passed
  • data – passes all registered properties for that campaign (slug, click or not, etc)
  • object – has access to all the methods and the class as well as all the properties

Event Handlers

OptinMonsterInit

Trigger event to say OptinMonster is initialized.

self.trigger('OptinMonsterInit');

view example


OptinMonsterManualOptinSuccess

Trigger event to say OptinMonster has been loaded successfully via click.

self.trigger('OptinMonsterManualOptinSuccess');

view example


OptinMonsterManualOptinError

Trigger event to say OptinMonster has encountered an error processing the campaign.

self.trigger('OptinMonsterManualOptinError');

view example


OptinMonsterLoaded

Trigger event that OptinMonster is now fully loaded and about to fire the open mechanism.

self.trigger('OptinMonsterLoaded');

view example


OptinMonsterBeforeShow

Trigger event to say OptinMonster is about to be shown.

self.trigger('OptinMonsterBeforeShow');

view example


OptinMonsterOnShow

Trigger event to say OptinMonster is now open.

self.trigger('OptinMonsterOnShow');

view example


OptinMonsterPositionOptin

Trigger event to say OptinMonster has now been positioned.

self.trigger('OptinMonsterPositionOptin');

view example


OptinMonsterBeforeClose

Trigger event to say OptinMonster is about to close.

self.trigger('OptinMonsterBeforeClose');

view example


OptinMonsterBeforeOptin

Trigger event to say OptinMonster is about to process a campaign.

self.trigger('OptinMonsterBeforeOptin');

view example


OptinMonsterOnClose

Trigger the campaign as closed.

self.trigger('OptinMonsterOnClose');

view example


OptinMonsterTracked

Fire an event to say the OptinMonster is about to track stats.

self.trigger('OptinMonsterTracked');

view example


OptinMonsterTrackedImpression

Trigger event for type of tracking that has just occurred.

self.trigger('OptinMonsterTrackedImpression');

view example


OptinMonsterPreOptin

Trigger event before a conversion request is made.

self.trigger('OptinMonsterPreOptin');

view example


OptinMonsterTrackedConversion

Trigger event for type of tracking that has just occurred. `

self.trigger('OptinMonsterTrackedConversion');

view example


OptinMonsterOnError

Trigger the error event.

self.trigger('OptinMonsterOnError');

view example


OptinMonsterOptinSuccess

Trigger event to say OptinMonster has processed the campaign successfully.

self.trigger('OptinMonsterOptinSuccess);

view example


OptinMonsterOnRedirect

Trigger event to say OptinMonster is about to redirect to the success page.

self.trigger('OptinMonsterOnRedirect');

view example


OptinMonsterOptinSuccessClose

Trigger event to say OptinMonster has processed the campaign successfully and has closed.

self.trigger('OptinMonsterOptinSuccessClose');

view example


OptinMonsterOptinError

Trigger event to say OptinMonster has encountered an error processing the campaign.

self.trigger('OptinMonsterOptinError');

view example


OptinMonsterAppendHolder

Trigger event for handling styles.

self.trigger('OptinMonsterAppendHolder');

view example


OptinMonsterCustomDone

Trigger event to say OptinMonster has finished preparing custom campaigns.

self.trigger('OptinMonsterCustomDone');

view example


OptinMonsterPlaceholderDone

Trigger event to say OptinMonster placeholders are set. This will only fire if placeholder support (such as in IE8) is needed.

self.trigger('OptinMonsterPlaceholderDone');

view example


OptinMonsterSocial

Trigger an event for social services.

self.trigger('OptinMonsterSocial');

view example


Examples

OptinMonsterInit

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


OptinMonsterManualOptinSuccess

In this example, we’ll write to the browser’s console a message to confirm the successful loading of our manually triggered campaign.


OptinMonsterManualOptinError

In this example, we’ll write to the browser’s console a message to notify us there was an error in loading our manually triggered campaign.


OptinMonsterLoaded

In this example, we’ll write to the browser’s console a message to confirm the successful loading of our campaign.


OptinMonsterBeforeShow

In this example, we’re going to load a div containing an embedded YouTube video set to autoplay behind our manually triggered campaign just before the campaign shows. We’ll load the overlay only on desktop browsers and trigger the overlay to close with the ESC key.


OptinMonsterOnShow

In this example we’ll stop a video from playing when the campaign closes, then add the video url back when the campaign opens – useful for Manual Trigger campaigns.


OptinMonsterPositionOptin

In this example, we’ll make our Canvas campaign draggable with the Dragon jQuery plugin once it’s been positioned on the page. *Be sure to enqueue the required dragon.min.js file, we recommend you review the readme file for the plugin.


OptinMonsterBeforeClose

In this example, we’ll redirect users to a specific url when the campaign is closed.


OptinMonsterBeforeOptin

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.


OptinMonsterOnClose

In this example we’ll stop a video from playing in our Canvas lightbox campaign when it closes.


OptinMonsterTracked

In this example we’ll log a message in the browser console when a campaign is successfully tracked.


OptinMonsterTrackedImpression

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


OptinMonsterPreOptin

In this example we’ll log a message to the console to let us know a conversion is about to occur.


OptinMonsterTrackedConversion

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


OptinMonsterOnError

In this example we’ll animate the error message each time it’s triggered.


OptinMonsterOptinSuccess

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.


OptinMonsterOnRedirect

In this example we’ll log a message in the browser’s console when the page is about to redirect to the Success URL.


OptinMonsterOptinSuccessClose

In this example we’ll close the campaign on success, then begin a direct file download.


OptinMonsterOptinError

In this example, we’ll redirect users to a specific url if there’s an error.


OptinMonsterAppendHolder

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


OptinMonsterCustomDone

In this example, we’ll log a message when the custom campaign form has finished loading.


OptinMonsterPlaceholderDone

In this example, we’ll log a message if placeholders are needed.


OptinMonsterSocial

In this example, we’ll use the Share Button plugin and generate our share buttons when the OptinMonsterSocial event fires.

We recommend you look over the readme file for the plugin, which requires an empty <div>, so in our example we added <div class="share"></div> to the Custom HTML field of a Canvas campaign.

Be sure to enqueue the required share.min.js file, then use the following to create a new Share Button.

Using the OptinMonsterSocial javascript event to output custom sharing buttons.