如何在JavaScript中制作有效的退出意图弹出窗口

最新推荐文章于 2023-02-21 21:47:41 发布

weixin_26750481

最新推荐文章于 2023-02-21 21:47:41 发布

阅读量356

点赞数

文章标签： python javascript ViewUI

原文链接：https://medium.com/weekly-webtips/how-to-make-an-effective-exit-intent-popup-in-javascript-bf6051b4a6d4

版权

You have probably already seen one of those popups that appear just as you are about to leave the page. Feels like they are reading your mind. But are they? This is called an exit-intent popup and in reality, implementing a similar behavior is fairly easy. We’re going to make use of some DOM events to achieve the same thing. In this tutorial, you’ll learn how to do it that step by step.

您可能已经看到了即将离开页面时出现的那些弹出窗口之一。感觉就像他们在读你的想法。但是，是吗？这称为退出意图弹出窗口，实际上，实现类似行为非常容易。我们将利用一些DOM事件来实现相同的目的。在本教程中，您将逐步学习如何做到这一点。

As popups can be very disruptive in nature, we will make it as subtle as we can and only display it once to each visitor. Let’s jump into setting up the markup for the popup.

由于弹出式窗口在本质上可能具有很大的破坏性，因此我们将使其尽可能微妙，并且仅向每个访问者显示一次。让我们进入为弹出窗口设置标记的过程。

设置项目 (Setting up the Project)

Inside your project, create the following structure for the popup:

在项目内部，为弹出窗口创建以下结构：

Everything will go inside the .exit-intent-popup container. It will have a semi-black overlay. The .newsletter will be the actual popup. To make it work like a popup, you will also need some CSS.

一切都将放入.exit-intent-popup容器中。它将具有半黑色的覆盖。 .newsletter将是实际的弹出窗口。为了使其像弹出窗口一样工作，您还需要一些CSS。

添加一些CSS (Adding Some CSS)

The important parts are the overlay and the .newsletter container. To make the popup cover the whole screen, you’ll need to make it fixed and use all four positions.

重要的部分是覆盖和.newsletter容器。要使弹出窗口覆盖整个屏幕，您需要将其fixed并使用所有四个位置。

You also want to add a z-index to make sure it covers other elements on the page that already appears on top of everything — like tooltips for example. By assigning 0 for each position, it will be stretched for the whole screen.

您还希望添加一个z-index ，以确保它覆盖了页面上已经显示在所有内容顶部的其他元素，例如工具提示。通过为每个位置分配0 ，它将在整个屏幕上拉伸。

To position the .newsletter to the dead center inside the popup, set top and left to 50% and also use translate(-50%, -50%). This is because, by default, the anchor point is set to the upper left corner of an element. Translate will move it back 50% on both axis.

要将.newsletter定位到.newsletter中的死点，请将top和left设置为50％，然后使用translate(-50%, -50%) 。这是因为，默认情况下，锚点设置为元素的左上角。平移会将其在两个轴上移回50％。

显示弹出窗口 (Showing the popup)

Now the popup is visible no matter what. We actually want to show it when a class is applied to .exit-intent-popup. Extend popup.css with the following lines:

现在无论如何都可以看到弹出窗口。我们实际上想在将类应用于.exit-intent-popup时显示它。用以下行扩展popup.css ：

This works as expected, but the popup just appears out of nowhere.

这可以按预期工作，但弹出窗口似乎无处不在。

Let’s also add some nice easing to it to create a smooth animation. Using translate and scale for transformation, the popup will smoothly scale into the view from the bottom of the screen.

让我们还添加一些不错的缓动来创建平滑的动画。使用translate和scale进行转换，弹出窗口将从屏幕底部平滑缩放到视图中。

确定何时显示弹出窗口 (Determining When to Show the Popup)

Now we need to hook in some JavaScript and determine when to apply the class to show the popup. To get the desired effect, we want to detect if the user moves their cursor out of the window.

现在，我们需要连接一些JavaScript并确定何时应用该类以显示弹出窗口。为了获得理想的效果，我们要检测用户是否将光标移出窗口。

We can achieve this, by adding a mouseout event listener to the document and see if there’s no toElement and relatedTarget. If both of them are null, then the user moved their mouse out from the window. This is when you want to add the class.

我们可以通过在document添加mouseout事件侦听器并查看是否没有toElement和relatedTarget来实现此目的。如果它们都为null ，则用户将鼠标从窗口移出。这是您要添加类的时间。

However, this will happen every time the mouse is moved out. Preferably, you only want to show it once per session. To do that, you need to get rid of the event listener. But before we can do that, we need to convert the callback function into a named function.

但是，每次将鼠标移出时都会发生这种情况。最好只在每个会话中显示一次。为此，您需要摆脱事件监听器。但是在执行此操作之前，我们需要将回调函数转换为命名函数。

This way, you can specify which callback function you want to remove on which DOM event.

这样，您可以指定要在哪个DOM事件上删除的回调函数。

完善展示算法 (Refining the showing algorithm)

Now there are two more problems when it comes to showing the popup. First, as soon as the page loads, it will appear as long as the user moves their mouse out from the window.

现在，在显示弹出窗口时还有两个问题。首先，页面加载后，只要用户将鼠标从窗口中移出，它就会出现。

Secondly, the popup also appears when the user moves their mouse to the taskbar or to the left or right side of the screen. Usually, this is not an indicator that they want to leave the page.

其次，当用户将鼠标移至任务栏或屏幕左侧或右侧时，也会出现弹出窗口。通常，这并不是他们要离开页面的指示。

Therefore, we can cater for these cases and exclude them from showing the popup.

因此，我们可以满足这些情况，并将其排除在弹出窗口之外。

For example, by wrapping the event listener into a setTimeout, you can ensure, that the popup will only appear if the user already spent some time on the page. This will only attach the event listener after 10 seconds have elapsed. To also prevent it from showing when the user is not moving their mouse upwards, we need to check their cursor’s position.

例如，通过将事件侦听器包装到setTimeout ，可以确保仅当用户已经在页面上花费了一些时间时才会显示弹出窗口。仅在10秒钟后才附加事件监听器。为了防止在用户不向上移动鼠标时显示它，我们需要检查其光标的位置。

I’ve modified the mouseEvent function to check the value of clientY. This holds the vertical position of the mouse. If it hits less than 10, then the user moved their mouse close to the address bar.

我修改了mouseEvent函数以检查clientY的值。这将保持鼠标的垂直位置。如果命中率小于10，则用户将鼠标移到地址栏附近。

Now it only appears if they move their mouse upwards. There’s only one problem. You can’t really close the popup at the moment.

现在，仅当他们向上移动鼠标时才会显示。只有一个问题。您目前无法真正关闭弹出窗口。

退出弹出窗口 (Exiting the Popup)

You always want to provide a clear way for the user to close the popup. The most common way is to use a close button, which we already have in the DOM. Let’s attach a click event listener to it.

您始终希望为用户提供一种清除弹出窗口的清晰方法。最常见的方法是使用DOM中已经有的关闭按钮。让我们附加一个点击事件监听器。

You may ask why did I attach the event listener to the whole .exit-intent-popup, instead of just attaching it to the close button. This is useful because this way, we can improve the closing functionality and also close the popup when the mask around the box is clicked.

您可能会问为什么我将事件侦听器附加到整个.exit-intent-popup ，而不是仅将它附加到关闭按钮上。这很有用，因为通过这种方式，我们可以改善关闭功能，并且在单击框周围的蒙版时也可以关闭弹出窗口。

单击蒙版时退出 (Exiting when clicking on the mask)

Rewrite the previous function in the following way:

通过以下方式重写以前的功能：

This will now also test whether the user clicked on the overlay. Note that you’ll have to use destructuring to use the includes array method, as classList returns a DOMTokenList.

现在，这还将测试用户是否单击了叠加层。请注意，由于classList返回DOMTokenList ，因此必须使用解构才能使用includes数组方法。

按下逃生按钮时退出 (Exiting when hitting the escape button)

Lastly, let’s also enable the user to close the popup by hitting the esc key. Extend the exit function with a new line and also attach the same callback function to the keydown document event.

最后，我们还使用户能够通过按esc键关闭弹出窗口。用新的一行扩展exit函数，并将相同的回调函数附加到keydown文档事件。

添加一些饼干 (Adding Some Cookies)

Now that we have everything in place, there’s only one thing left to do. If you revisit the site, you’ll notice that the popup will appear again and again. This is not ideal as it has already been shown before. To fix this, let’s also add a final check. We’re going to introduce some cookies:

现在我们已经准备就绪，只剩下一件事了。如果您重新访问该站点，您会注意到弹出窗口将一次又一次出现。这是不理想的，因为之前已经显示过。要解决此问题，我们还要添加最终检查。我们将介绍一些cookie：

Whenever the popup is presented to a visitor, we set a cookie for 30 days. If this cookie exists, we don’t attach the event listeners to the document, until it expires. So where is this CookieService coming from?

每当将弹出窗口呈现给访问者时，我们都会将Cookie设置为30天。如果此cookie存在，则直到事件过期，我们才将事件侦听器附加到文档。那么，此CookieService来自何处？

I’ve created an object for the sole purpose of handling cookies. With a getCookie and setCookie method.

我已经创建了一个仅用于处理Cookie的对象。使用getCookie和setCookie方法。

摘要 (Summary)

Now you know exactly how to create an exit-intent popup, step by step. When it comes to using popups as call to actions, always try to think from the user’s perspective.

现在，您确切地知道了如何逐步创建退出意图弹出窗口。在使用弹出窗口作为号召性用语时，请始终尝试从用户的角度进行思考。

Having multiple popups on the page can be annoying and hurts user experience. Exit-intent popups provide a great way to grab the user’s attention as a last resort when they are — most probably — already ready to leave.

页面上有多个弹出窗口可能很烦人，并且会损害用户体验。当他们( 很可能已经准备好离开)时，退出意图弹出窗口提供了一种吸引用户注意力的绝妙方法，这是他们的最后选择。

Do you have experience with popups? What are your tips and strategies when implementing them? Let us know in the comments! Thank you for reading through, happy coding!

您是否有弹出窗口的经验？实施这些技巧和策略有哪些？让我们在评论中知道！感谢您的阅读，编码愉快！