2019年9月24日星期二

如何让 MailChimp 订阅对话框在点击时弹出

问题描述

我的博客提供 MailChimp 订阅,大家点击订阅链接后需要转跳到 MailChimp 的页面输入 email。MailChimp 官方提供直接嵌入在网页内的订阅对话框,我希望读者在博客上点击订阅链接后直接打开对话框,让订阅流程变得更顺畅,这样可能能够提高订阅率。(为了保持兼容性,如果读者在 RSS 阅读器或邮件内点击订阅链接,则还是正常打开订阅页面。)

问题在于 MailChimp 官方不提供订阅对话框通过点击触发的选项。对话框的触发条件只有简单的几种:页面加载后弹出、用户滚动到页面底部时弹出……(可能 MailChimp 是设计给非程序员用的,所以不提供任何需要写点代码才能完成的整合,只提供包装好简单易用的方案。)为此,我需要修改 MailChimp 官方提供的对话框嵌入代码,使得它能在订阅链接点击时触发。

解决方案

MailChimp 提供的嵌入代码包含两个 <script> 标签。第一个 <script> 标签不需要做改动,第二个 <script> 标签需要把内含的代码需要嵌入到一个函数中去,然后就可以在链接的点击事件里通过调用这个函数触发订阅对话框了。以下是参考代码:

在上述代码中,我没有改动第一个<script> 标签,第二个<script> 标签里面有一个函数,第三个 <script> 标签对页面上的订阅链接添加点击事件响应函数并在那里调用第二个 <script> 标签里定义的函数。

第二个 <script> 标签里定义的函数,包含了 MailChimp 官方提供的代码中的 window.dojoRequire(...) 这一行。如果你要使用我的代码,你必须把这一行替换成 MailChimp 给你的同一行代码,然后才会显示你的对话框而不是我的对话框。

在这一行前面,我插入了两行代码用来删除 MailChimp 会插入的两个 cookie:一个是在用户关闭对话框后加入,另一个是在用户订阅后加入。只要有这两个 cookie 中的一个,对话框就不再显示。这对页面打开就触发的订阅对话框来说是合理的,谁也不希望每次打开页面都会看到对话框弹出。但如果用户主动点击链接,则应该总是打开对话框。为此我们要删除上述两个 cookie,保证对话框总是能打开。

第三个 <script> 标签是针对我的博客定制的,并不适用于其它人。我在我的博客页面内寻找所有指向我 MailChimp 订阅页面的链接,然后绑定这些链接的点击事件。用户点击链接的话,就调用第二给 <script> 标签内的函数,打开对话框,同时取消正常链接点击带来的页面转跳。

如果你想测试一下这项功能,请点击邮件订阅链接。如果你是在博客上阅读本文的话,应该会看到对话框。对话框打开后,记得输入 email 然后订阅哦!

没有评论:

发表评论