第三方脚本（optinmonster）仅适用于 Nuxt3 中的首页访问和手动页面刷新

Question

我使用 Nuxt3 作为我的静态网站，并成功集成 OptinMonster 脚本来管理活动。但是，我遇到了一个问题，即 OptinMonster 脚本在初始页面访问和后续手动刷新期间可以正常运行。

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'
        },
      ]
   }
}

不幸的是，当导航到应用程序内的其他页面时，OptinMonster 脚本似乎没有执行，并且活动无法显示。我发现了一个相关的 nuxt 问题thread，但无法找到解决方案。

Answer 1

为什么会出现这个问题？

• 当您点击内部链接时，SPA 会动态替换内容，并使用 JavaScript 更新 URL。这可能会导致手动附加的脚本在路由更改后丢失其初始状态或功能。
• 为了解决这个问题，我们需要重置或重新初始化这些 路线更改的脚本。就我而言，它是 OptinMonster 脚本。

解决方案

1. 创建一个新插件。

   ~/plugins/optinmonster.client.js

2. 使用 nuxt hook 在路线更改时重置 optinmonster 脚本。

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;
      }
    }
  });
});