如何在 Next.js 应用程序中使用 mailerlite 弹出窗口
Posted
技术标签:
【中文标题】如何在 Next.js 应用程序中使用 mailerlite 弹出窗口【英文标题】：How to use mailerlite popups in a Next.js application 【发布时间】：2021-06-22 15:27:05 【问题描述】：我正在为客户的 next.js 项目集成一个 mailerlite 弹出窗口，我很难将 javascript sn-ps 转换为使弹出窗口正常运行所需的 jsx。在第一次加载时它似乎工作得很好，但在重新加载时我收到以下错误。
window is not defined
我在处理DOM操作时遇到过这个问题，但是在这种情况下，从sn-p中的代码来看，我需要window对象。
在您网站的每个页面的结束标记之前安装以下 Javascript 的 sn-p。您只需添加此 sn-p 一次，即使您打算拥有几个不同的网络表单。 em>
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r) m['MailerLiteObject']=e;function f()
var c= a:arguments,q:[];var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);)(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '912433', 'd5p1f7l9g0', 'load');
</script>
<!-- End MailerLite Universal -->
我已将此代码放在我的布局包装器中。如前所述，它在首次加载时运行良好，但一旦用户导航到新页面，就会出现上述错误。
PS我发现了一个关于这个主题的老问题here，但它很老，与我的情况不太相关。我需要弄清楚如何将上面的 sn-p 转换为 nextjs。任何帮助都将不胜感激。
【问题讨论】：
【参考方案1】：这种方法将 MailerLite 通用标签视为自己的 <script> 托管在您网站的域中。
-
添加 NextJS custom document。
在
./public 中创建一个包含MailerLite 通用标签代码的JavaScript 文件。我把我的放在./public/scripts/ml.js。
在您的自定义_document.js 文件中添加一个<script> 标记加载#2：
import Document, html, Head, Main, NextScript from 'next/document'
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx)
return ...initialProps
render()
return (
<Html>
<Head>
<script async src="/scripts/ml.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default MyDocument
从那里一切都按预期工作！ （警告：我只使用嵌入式表单）。
【讨论】：
以上是关于如何在 Next.js 应用程序中使用 mailerlite 弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有 Node.js 服务器的情况下部署 Next.js 应用程序？
如何在带有 TypeScript 的 next.config.js 中使用 i18n 和 next/image？