0

I'm using Nuxt3 for my static website and have successfully integrated the OptinMonster script to manage campaigns. However, I've run into an issue where the OptinMonster script functions correctly during the initial page visit and subsequent manual refreshes.

app: {
  head: {
     script: [
        {
          src: 'https://a.omappapi.com/app/js/api.min.js',
          async: true,
          defer: true,
          'data-user': 2345,
          'data-account': 3453,
          type: 'text/javascript'
        },
      ]
   }
}

Unfortunately, when navigating to other pages within the application, OptinMonster script doesn't appear to execute, and the campaigns fails to display. I have found a related nuxt issue thread but couldn't able to find a solution.

VasanthThoraliKumaran
  • 51
  • 7
  • Hi, give a try to [that one](https://stackoverflow.com/a/67535277/8816585). – kissu Dec 20 '22 at 07:29
  • Btw, how do you "visit" another page? `nuxt-link` I hope, and not using `a` tags. As for the refresh, it doesn't really matter and you don't [persist](https://stackoverflow.com/a/66872372/8816585) an external script. Or at least, we'll need more context as to why you're trying such a thing. Needing a Service worker? What is the kind of script loaded here? – kissu Dec 20 '22 at 07:46
  • yes i use nuxt-link. Persist i meant was, I want this script to get loaded each time i visit the page. Can you explain me why it gets loaded the first time i visit the page & not on the next visit?. – VasanthThoraliKumaran Dec 20 '22 at 07:54
  • Depends on the script. This could be because it's using an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE). You're not supposed to have this kind of behavior inside of an SPA anyway. You can inspect the code and trigger it yourself manually. Or rather use an NPM package and follow the conventions of calling a given method. – kissu Dec 20 '22 at 07:56
  • eitherway I changed it into regular function and called it inside beforeMount, if It has access to dom. I expected it would attach the script into head. Ok i'll try debugging this. – VasanthThoraliKumaran Dec 20 '22 at 08:02
  • I have edited my code and posted the solution. kindly ignore the above comments which can be irrelevant. thanks. – VasanthThoraliKumaran Aug 09 '23 at 04:58

1 Answers1

0

Why does this problem occurred?

  • SPAs replace content dynamically when you click on internal links, using JavaScript to update the URL as well. This can cause manually attached scripts to lose their initial state or functionality after a route change.
  • To address this, We need to reset or reinitialize these scripts on route changes. In my case, Its OptinMonster script.

Solution

  1. Create a new plugin. ~/plugins/optinmonster.client.js
  2. Reset optinmonster scripts on route change using nuxt page hook.

optinmonster.client.js

import { defineNuxtPlugin, useRoute } from 'nuxt/app';
let hasResetOptinMonster = false;
let oldPath = null;
/*
 It resets optinmonster campaigns whenever the route changes and instantly loads them.
*/
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finish', () => {
    const route = useRoute();
    const currentPath = route.fullPath;
    if (!hasResetOptinMonster || oldPath != currentPath) {
      const optinMonsterApi = window.om23345_3432;
      if (optinMonsterApi) {
        optinMonsterApi.reset();
        hasResetOptinMonster = true;
        oldPath = currentPath;
      }
    }
  });
});
VasanthThoraliKumaran
  • 51
  • 7