how-to-make-an-effective-exit-intent-popup-in-javascript

[utterances-bot]

How to Make an Effective Exit-Intent Popup in JavaScript - Weekly Webtips

Get your weekly dose of webtips

https://webtips.dev/how-to-make-an-effective-exit-intent-popup-in-javascript

[flowforfrank]

Gary Fairweather • 3 days ago Good day, thank you for this... code works well and got it running with relative ease.

I have one query however, in my particular use case everything is working but the popup seems to trigger more than once on exit intent. It's not immediate but if you leave the page over and over without actually closing the tab completely, it eventually shows the popup again (even though the cookie is being implemented).

Wondering if it is something in particular I have done that causes the above.

Any further insight would be greatly appreciated,

[flowforfrank]

Gary Fairweather • 3 days ago Good day, thank you for this... code works well and got it running with relative ease. I have one query however, in my particular use case everything is working but the popup seems to trigger more than once on exit intent. It's not immediate but if you leave the page over and over without actually closing the tab completely, it eventually shows the popup again (even though the cookie is being implemented). Wondering if it is something in particular I have done that causes the above. Any further insight would be greatly appreciated,

Hey Gary!

It's hard to tell what went wrong without a code example, but I've created a repository for you and others to reference in the future. You can get the code from there in one piece, that should be working as expected. Please let me know if you still experience problems. You can compare your code with this repo to find the culprit. You can find the full source code here:

https://github.com/flowforfrank/exit-intent

[flowforfrank]

Sunke Lüppen • 3 months ago Hello,

first... Thank you for the Script! Works fine for me.

My Question: Is there a simple way to modify this script to work on mobile devices as well?

Best Regards

Sunke

[flowforfrank]

Sunke Lüppen • 3 months ago Hello, first... Thank you for the Script! Works fine for me. My Question: Is there a simple way to modify this script to work on mobile devices as well? Best Regards Sunke

Hi Sunke! Thank you for your comment. Unfortunately, I haven't implemented it for mobile yet, but it's on my todo list. I will share the link here once ready if you are interested. Until then, please see my other comment below, under the thread for Ellouise, where I explain how I would approach this for mobile devices.

[flowforfrank]

Ellouise Desiree • 5 months ago Hello, I've followed all the steps and it works very well. However, the exit intent shows on every page every time the user goes to exit. Is there a way to make it recognise the website session as a whole, so that if my customers are browsing through multiple pages, they aren't being bombarded with the exit intent every time?

[flowforfrank]

Ellouise Desiree • 5 months ago Hello, I've followed all the steps and it works very well. However, the exit intent shows on every page every time the user goes to exit. Is there a way to make it recognise the website session as a whole so that if my customers are browsing through multiple pages, they aren't being bombarded with the exit intent every time?

Hello Ellouise, you can add another cookie or an item into localStorage as soon as your user lands on the page, to indicate they will about to see the popup. Make sure you add this after the event listeners that are wrapped into the setTimeout, and also modify your if statement to check the presence of this. This way, it will only be shown on the very first page that the user opens.

if (!CookieService.getCookie('exitIntentShown') && !CookieService.getCookie('exitIntentWillShow')) { ... }

if (!CookieService.getCookie('exitIntentWillShow')) {
  CookieService.setCookie('exitIntentWillShow', true, 30);
}

Keep in mind you also need to listen for the unload event, where you need to remove the cookie if the popup hasn't been shown. For this, you will need another boolean flag, otherwise, you will be left with no popup if:

• The user lands on your site for the first time, and before triggering the popup, immediately navigates to another page
• They close the initial page without seeing the popup. But since the cookie is already set, no popup will be shown for the rest of the session.

[flowforfrank]

Ellouise Desiree • 5 months ago Hello, I've followed all the steps and it works very well. However, the exit intent shows on every page every time the user goes to exit. Is there a way to make it recognise the website session as a whole so that if my customers are browsing through multiple pages, they aren't being bombarded with the exit intent every time?

Hello Ellouise, you can add another cookie or an item into localStorage as soon as your user lands on the page, to indicate they will about to see the popup. Make sure you add this after the event listeners that are wrapped into the setTimeout, and also modify your if statement to check the presence of this. This way, it will only be shown on the very first page that the user opens.

if (!CookieService.getCookie('exitIntentShown') && !CookieService.getCookie('exitIntentWillShow')) { ... }

if (!CookieService.getCookie('exitIntentWillShow')) {
  CookieService.setCookie('exitIntentWillShow', true, 30);
}

Keep in mind you also need to listen for the unload event, where you need to remove the cookie if the popup hasn't been shown. For this, you will need another boolean flag, otherwise, you will be left with no popup if:

• The user lands on your site for the first time, and before triggering the popup, immediately navigates to another page
• They close the initial page without seeing the popup. But since the cookie is already set, no popup will be shown for the rest of the session.

Ellouise Desiree ↩️ Ferenc Almasi • 4 months ago

Working perfectly thanks for your help. I wonder whether you've had a crack at exit intent delivery on mobile devices? Would love to see how you would tackle that issue.

[flowforfrank]

Ellouise Desiree • 5 months ago Hello, I've followed all the steps and it works very well. However, the exit intent shows on every page every time the user goes to exit. Is there a way to make it recognise the website session as a whole so that if my customers are browsing through multiple pages, they aren't being bombarded with the exit intent every time?

Hello Ellouise, you can add another cookie or an item into localStorage as soon as your user lands on the page, to indicate they will about to see the popup. Make sure you add this after the event listeners that are wrapped into the setTimeout, and also modify your if statement to check the presence of this. This way, it will only be shown on the very first page that the user opens.

if (!CookieService.getCookie('exitIntentShown') && !CookieService.getCookie('exitIntentWillShow')) { ... }

if (!CookieService.getCookie('exitIntentWillShow')) {
  CookieService.setCookie('exitIntentWillShow', true, 30);
}

Keep in mind you also need to listen for the unload event, where you need to remove the cookie if the popup hasn't been shown. For this, you will need another boolean flag, otherwise, you will be left with no popup if:

• The user lands on your site for the first time, and before triggering the popup, immediately navigates to another page
• They close the initial page without seeing the popup. But since the cookie is already set, no popup will be shown for the rest of the session.

Ellouise Desiree ↩️ Ferenc Almasi • 4 months ago

Working perfectly thanks for your help. I wonder whether you've had a crack at exit intent delivery on mobile devices? Would love to see how you would tackle that issue.

I think that would make a great addition to this tutorial. I would go about it this way:

• Let the user spend some time on the page (Just like for this one with 10secs)
• Check how much the user has scrolled down and trigger, eg.: after they passed 50% of the page
• When scrolling down, the title bar disappears in Chrome on Android. If the user starts to scroll upwards, it can be an indication they want to leave. You can trigger the popup then.

[warnakey]

In here you have the cookie set to 30 days, how could I change it to have the cookie expire after 1 hour, or maybe 1 day?

[flowforfrank]

In here you have the cookie set to 30 days, how could I change it to have the cookie expire after 1 hour, or maybe 1 day?

Hey @warnakey, If you look into the CookieService.js, you can see that the setCookie method uses days to set the cookie, so you could use the following to set it expire after 1 day:

CookieService.setCookie('exitIntentWillShow', true, 1);

If you want to work it for hours, you can change the date.setTime line to the following:

- date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+ date.setTime(date.getTime() + (1 * 60 * 60 * 1000));   // Set expiry date to one hour
+ date.setTime(date.getTime() + (24 * 60 * 60 * 1000));  // Set expiry date to 24 hours

[warnakey]

@flowforfrank THANK YOU. This works perfect. Really appreciate your extremely fast response. You're awesome

[renzodonzelli]

Hi, this code works perfectly in my website, but I would need the following: there is a way to block the exit popup after user visited a specific url page? I mean that the popup have to appears if the user are going to exit from the website. But if he visited specific page into my website, after that, he can leave the website without see the popup. Thanks for your help!

[flowforfrank]

Hi, this code works perfectly in my website, but I would need the following: there is a way to block the exit popup after user visited a specific url page? I mean that the popup have to appears if the user are going to exit from the website. But if he visited specific page into my website, after that, he can leave the website without see the popup. Thanks for your help!

Hey @renzodonzelli,

You can check your window.location and see if it matches a path, and if so, you can just prevent the popup from showing up. For example, you can add a new condition to your shouldShowExitIntent variable.:

const shouldShowExitIntent = 
        !e.toElement && 
        !e.relatedTarget &&
        e.clientY < 10 &&
        window.location.pathname !== 'newsletter'; // Only show the popup if the user is not on the newsletter page

You can also use window.location.href if that is more suitable to you (It also returns your hostname). Hope this helps. Let me know if you need more clarification.

[TartanDig]

Fantastic tutorial and code - despite normally coding in red crayon I was able to get something together. I did come across the issue where despite hitting X, the pop would display on other pages and then read your answer above. I tried adding that inside the popup.js file by editing the bottom part but for some reason it's still triggering on every page. Is there any chance you could show how the above fix works on the actual popup.js page? Many thanks and undying gratitude in advance!!

[TartanDig]

My bad - I think the js file was minified and cached by wp rocket and not displaying changes! Seems to be working well now

[apload-gmbh]

Great job! Exactly what I was looking for. In your git respository the cookie service was missing. I added the code snippet from above to popup.js and it worked.

[flowforfrank]

Great job! Exactly what I was looking for. In your git respository the cookie service was missing. I added the code snippet from above to popup.js and it worked.

Hey @apload-gmbh, you can find the code for the CookieService here. Note that in this code example, it's manually included in index.html