Installing OptinMonster with Nuxt.js

Recently I've tested the OptinMonster as I was looking for a tool that could help me build my email subscription list. It is amazing so I decided to use it on my blog.

The issue is that my blog is written in Nuxt.js - an SSR framework built on top of Vue. The reason behind that I'll leave for another article.

However, the official documentation only covers integration with standalone Vue.js application, so to install it properly I was forced to dig a bit deeper.

Here is how to do it properly.

Install the script in the HTML body

The first step is to place the OptinMonster's script tag into your HTML right before closing the <body\> tag. You can find the script in the last step of creating the campaign and should look more or less like this:

<script
  type="text/javascript"
  src="https://a.opmnstr.com/app/js/api.min.js"
  data-account="MY_ACCOUNT_ID"
  data-user="MY_USER_ID"
  async
\></script\>

You should replace the MY_ACCOUNT_ID and MY_USER_ID placeholders with your individual identifiers.

Now it's time to add it to your application. The issue you can see is that in the brand new Nuxt application there is no HTML file at all, so where should you paste this script?

Well, that's a nice question.

Nuxt generates the HTML file automatically unless you have an app.html file defined in the root of your application.

So to solve this problem, what you need to do is just create a file app.html in the root of your project's folder and type the code below:

# app.html

<!DOCTYPE html\>
<html {{ HTML_ATTRS }}\>
   
  <head\>
        {{ HEAD }}  
  </head\>
   
  <body {{ BODY_ATTRS }}\>
        {{ APP }}    
    <script
      type="text/javascript"
      src="https://a.opmnstr.com/app/js/api.min.js"
      data-account="MY_ACCOUNT_ID"
      data-user="MY_USER_ID"
      async
    \></script\>
  </body\>
</html\>

This way you'll have the general HTML layout updated with an Optinmonster's script. All the {{ TAG }} parts of the file will be replaced later by the Nuxt.js with dynamic content.

So this is the first part. Now let's move to the next one.

Refresh the script on route change

Single-Page applications have this problem, that whenever you'll click on the internal link, the content of the HTML file is replaced by the javascript, and the URL in the browser is also just updated by the javascript of the library.

That means, a lot of manually attached scripts will need to be refreshed on the route change whenever that happens and this is also a case now.

To make sure the OptinMonster scripts will work all the time - not only when your users directly visit the pages with campaigns, but we also need to add a plugin with the tweaked code from the OptinMonster

Create a plugin file

In the plugins directory create a file: optinmonster.js.

import Vue from 'vue';
import Router from 'vue-router';

const router = new Router({});

router.beforeEach((to, from, next) => {
  if (window.om5678_1234) {
    window.om5678_1234.reset();
  }
});

Vue.use(Router);

According to the docs:

The method is formatted based on your account and user id: om{accountId}_{userId} so if your account ID is 1234 and your user ID 5678 the object would be window.om5678_1234.

This way just replace the numbers above with the appropriate accountId and userId.

Install the plugin

Once you've created the plugin, the last part is to inform your application that you want to use it. Open the nuxt.config.js file and find the plugins section and add a path to your plugin file to the array defined there:

    # nuxt.config.js
     ...
     plugins: [
     '~/plugins/optinmonster'
     ],
     ...

Once you do it, everything should work like a charm. Just publish your campaigns, and observe how your subscriber lists grow!

Special Thanks