cables-sensors-exit-intent-popup-mobile.liquid

{% assign klaviyo_code = settings.klaviyo_newsletter_code %}

<div class="waitdontgo position-foreground" style="display:none;">
  <div class="overlay"></div>
  <div class="popup">
    <div class="step one">
      <div class="layer">
        {% include 'popup-step-1' %}
      </div>
    </div>
    <div class="step two" style="display:none">
      <div class="layer">
        {% include 'popup-step-2' %}
      </div>
    </div>
    <div class="step three" style="display:none">
      <div class="layer">
        {% include 'popup-step-3' %}
      </div>
    </div>
    <div class="exit exit-icon">&#215;</div>
  </div>
</div>

<script>

(function() {
  /* DEPENDENCIES */
    /* Ouibounce */
    !function(e,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):e.ouibounce=n()}(this,function(e,n,o){return function(e,n){"use strict";function o(e,n){return"undefined"==typeof e?n:e}function i(e){var n=24*e*60*60*1e3,o=new Date;return o.setTime(o.getTime()+n),"; expires="+o.toUTCString()}function t(){s()||(L.addEventListener("mouseleave",u),L.addEventListener("mouseenter",r),L.addEventListener("keydown",c))}function u(e){e.clientY>k||(D=setTimeout(m,y))}function r(){D&&(clearTimeout(D),D=null)}function c(e){g||e.metaKey&&76===e.keyCode&&(g=!0,D=setTimeout(m,y))}function d(e,n){return a()[e]===n}function a(){for(var e=document.cookie.split("; "),n={},o=e.length-1;o>=0;o--){var i=e[o].split("=");n[i[0]]=i[1]}return n}function s(){return d(T,"true")&&!v}function m(){s()||(e&&(e.style.display="block"),E(),f())}function f(e){var n=e||{};"undefined"!=typeof n.cookieExpire&&(b=i(n.cookieExpire)),n.sitewide===!0&&(w=";path=/"),"undefined"!=typeof n.cookieDomain&&(x=";domain="+n.cookieDomain),"undefined"!=typeof n.cookieName&&(T=n.cookieName),document.cookie=T+"=true"+b+x+w,L.removeEventListener("mouseleave",u),L.removeEventListener("mouseenter",r),L.removeEventListener("keydown",c)}var l=n||{},v=l.aggressive||!1,k=o(l.sensitivity,20),p=o(l.timer,1e3),y=o(l.delay,0),E=l.callback||function(){},b=i(l.cookieExpire)||"",x=l.cookieDomain?";domain="+l.cookieDomain:"",T=l.cookieName?l.cookieName:"viewedOuibounceModal",w=l.sitewide===!0?";path=/":"",D=null,L=document.documentElement;setTimeout(t,p);var g=!1;return{fire:m,disable:f,isDisabled:s}}});
    /* End Ouibounce */

    /* JS Cookie - */
    !function(e){var n=!1;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var o=window.Cookies,t=window.Cookies=e();t.noConflict=function(){return window.Cookies=o,t}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}function n(o){function t(n,r,i){var c;if("undefined"!=typeof document){if(arguments.length>1){if(i=e({path:"/"},t.defaults,i),"number"==typeof i.expires){var a=new Date;a.setMilliseconds(a.getMilliseconds()+864e5*i.expires),i.expires=a}try{c=JSON.stringify(r),/^[\{\[]/.test(c)&&(r=c)}catch(e){}return r=o.write?o.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=encodeURIComponent(String(n)),n=n.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),n=n.replace(/[\(\)]/g,escape),document.cookie=[n,"=",r,i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}n||(c={});for(var p=document.cookie?document.cookie.split("; "):[],s=/(%[0-9A-Z]{2})+/g,d=0;d<p.length;d++){var f=p[d].split("="),u=f.slice(1).join("=");'"'===u.charAt(0)&&(u=u.slice(1,-1));try{var l=f[0].replace(s,decodeURIComponent);if(u=o.read?o.read(u,l):o(u,l)||u.replace(s,decodeURIComponent),this.json)try{u=JSON.parse(u)}catch(e){}if(n===l){c=u;break}n||(c[l]=u)}catch(e){}}return c}}return t.set=t,t.get=function(e){return t.call(t,e)},t.getJSON=function(){return t.apply({json:!0},[].slice.call(arguments))},t.defaults={},t.remove=function(n,o){t(n,"",e(o,{expires:-1}))},t.withConverter=n,t}return n(function(){})});
    /* End JS Cookie */
  /* END DEPENDENCIES */

  /* Track customers who haven't seen the pop-up and are starting a new session */
  if (!Cookies.get('viewedOuibounceModal') && !Cookies.get('waitdontgoSession')) {
    ga('send', 'event', 'Exit-Intent Popup', 'New customer');
    Cookies.set('waitdontgoSession', true);
  }

  /* If this is true, the user has seen the pop-up and continued their session */
  if (Cookies.get('viewedOuibounceModal') && Cookies.get('waitdontgoSession') && !Cookies.get('continuedInterest')) {
    ga('send', 'event', 'Exit-Intent Popup', 'Continued interest after exit');
  }

  startPageOpenTimer();

  var container = document.getElementsByClassName('waitdontgo')[0],
      overlay = document.getElementsByClassName('overlay')[0],
      banner = document.getElementsByClassName('waitdontgo-banner')[0];
      closePopupEls = document.querySelectorAll('.waitdontgo .overlay:not(.popup), .waitdontgo .exit, .waitdontgo-banner .exit'),
      proceedEls = document.querySelectorAll('.proceed'),
      steps = document.querySelectorAll('.waitdontgo .step'),
      pageOpenTimer = 0,
      engagementTimer = 0;

  function triggerDesktopPopup() {
    document.body.classList.add('popup-open');
    container.style.display = 'block';
    overlay.classList.add('activated');
    engageUser();
  }

  function triggerMobileBanner() {
    if (!Cookies.get('viewedOuibounceModal')) {
      banner.style.display = 'block';
      engageUser();
      Cookies.set('viewedOuibounceModal', true, { expires: 5000 });
    }  
  }

  function engageUser() {
    startEngagementTimer();
    for (i=0; i<proceedEls.length; i++) {
      proceedEls[i].addEventListener('click', proceed);
    };
    for (i=0; i<closePopupEls.length; i++) {
      closePopupEls[i].addEventListener('click', closePopup);
    };
    if (pageOpenTimer < 3000) { gaLabel = 'Less than 30 seconds'; }
      else if (3001 < pageOpenTimer && pageOpenTimer < 6000) { gaLabel = '30-60 seconds'; }
      else if (6001 < pageOpenTimer && pageOpenTimer < 12000) { gaLabel = '1-2 minutes'; }
      else { gaLabel = 'More than 2 minutes'; }

    if (ga) {
      ga('send', 'event', 'Exit-Intent Popup', 'Viewed popup', gaLabel);
      ga('send', 'event', 'Exit-Intent Popup', 'Popup triggered on', window.location.pathname)
    }
  }

  function proceed() {
    container.style.display = 'block';
    if (steps[0].style.display != 'none' || banner.style.display != 'none') {
      steps[0].style.display = 'none';
      if (banner) { banner.style.display = 'none'; }
      steps[1].style.display = 'block';
    } else {
      steps[1].style.display = 'none';
      steps[2].style.display = 'block';
    }
  }

  function startPageOpenTimer() {
    setInterval(function() {
      pageOpenTimer++;
    }, 10);
  }

  function startEngagementTimer() {
    setInterval(function() {
      engagementTimer++;
    }, 10);
  }

  function noCookie() {
    if (false) {
      return false
    } else { return true }
  }

  function closePopup() {
    document.body.classList.remove('popup-open');
    container.style.display = 'none';
    container.classList.add('closing');
    overlay.classList.remove('activated');
    banner.style.display = 'none';

    var gaAction = '', gaLabel = '';

    if (steps[0].style.display != 'none') { gaAction = 'Exited on screen 1'; }
      else if (steps[1].style.display != 'none') { gaAction = 'Exited on screen 2'; }
      else { gaAction = 'Submitted email / Exited on screen 3'; }

    if (engagementTimer < 100) { gaLabel = 'Less than 1 second'; }
      else if (101 < engagementTimer && engagementTimer < 300) { gaLabel = '1-3 seconds'; }
      else if (301 < engagementTimer && engagementTimer < 500) { gaLabel = '3-5 seconds'; }
      else if (501 < engagementTimer && engagementTimer < 1000) { gaLabel = '5-10 seconds'; }
      else if (1001 < engagementTimer && engagementTimer < 2000) { gaLabel = '10-20 seconds'; }
      else if (2001 < engagementTimer && engagementTimer < 6000) { gaLabel = '20-60 seconds'; }
      else { gaLabel = 'More than 1 minute'; }

    ga('send', 'event', 'Exit-Intent Popup', gaAction, gaLabel);

    /* If true, the user has stayed on the page after the pop-up triggered */
    setTimeout(function() {
      ga('send', 'event', 'Exit-Intent Popup', 'Continued interest after exit');
      Cookies.set('continuedInterest', true);
    }, 5000);
  }

  function loadScript(src, callback) {
    var s = document.createElement('script');
    var head = document.head;
    s.type = "text/javascript";
    s.async = true;
    s.src = src;
    s.addEventListener('load', function () {
      callback();
    }, false);

    head.appendChild(s);
  }

  loadScript('https://www.klaviyo.com/media/js/public/klaviyo_subscribe.js', function() {
    KlaviyoSubscribe.attachToForms("#popup_signup", {
      hide_form_on_success: true,
      custom_success_message: true,
      list:'{{ klaviyo_code }}',
      success: proceed
    });
  });


  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && noCookie() ){

    /* Handle mobile trigger */
    setTimeout(function() {
      triggerMobileBanner();
    }, 2000);

  } else {

    /* Handle desktop trigger */
    ouibounce(false, {
      sensitivity: 20,
      cookieExpire: 5000,
      callback: triggerDesktopPopup
    });
  }

})();
</script>

exit-intent-banner.liquid

{% assign title = settings.popup_step1_title %}

{% assign proceed_text = settings.popup_step1_proceed_text %}

<div class="waitdontgo-banner position-relative medium--hide!" style="display:none">
  <h1>{{ title }}</h1>
  <button class="button proceed">{{ proceed_text }}</button>
  <div class="exit exit-icon">&#215;</div>
</div>

popup-step-1.liquid

<div class="title">
  <h1>{{ settings.popup_step1_title }}</h1>
</div>
<div class="buttons">
  <div>
    <button class="button proceed">{{ settings.popup_step1_proceed_text }}</button>
  </div>
  <div>
    <button class="button exit">{{ settings.popup_step1_exit_text }}</button>
  </div>
</div>
 

popup-step-2.liquid

<div class="title">
  <h1>{{ settings.popup_step2_title }}</h1>
</div>
<div class="description bold">
  {{ settings.popup_step2_description }}
</div>
<form id="popup_signup" class="klaviyo_standard_embed_p{{ settings.klaviyo_newsletter_code }}" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
  <input type="hidden" name="g" value="{{ settings.klaviyo_newsletter_code }}">
  <div class="klaviyo_field_group">
    <input type="email" value="" name="email" id="k_id_email" placeholder="{{ settings.popup_step2_placeholder }}" />
  </div>
  <div class="klaviyo_messages">
    <div class="success_message" style="display:none;"></div>
    <div class="error_message" style="display:none;">
      <p>Please fill in your email address.</p>
    </div>
  </div>
  <div class="klaviyo_form_actions">
    <button type="submit" class="button email">{{ settings.popup_step2_action_text }}</button>
    <a class="text-center exit block yellow escape">{{ settings.popup_escape_text }}</a>
  </div>
</form>

popup-step-3.liquid

<div class="title">
  <h1>{{ settings.popup_step3_title }}</h1>
</div>
<div class="description">
  <p>{{ settings.popup_step3_description }}</p>
</div>
<button class="button exit return-to-shop">{{ settings.popup_exit_action_text }}</button>
<div class="description fine-print">
  <p>{{ settings.popup_step3_fine_print }}</p>
</div>

settings_schema.json

// should be placed in settings_schema.json
{
    "name": "Exit Intent Pop-Up",
    "settings": [
      {
        "type": "header",
        "content": "Klaviyo"
      },
      {
        "type": "text",
        "label": "Newsletter ID",
        "id": "klaviyo_newsletter_code"
      },
      {
        "type": "header",
        "content": "Greeting"
      },
      {
        "type": "text",
        "label": "Title",
        "id": "popup_step1_title",
        "info": "E.g. Take 10% off your purchase!"
      },
      {
        "type": "text",
        "label": "Proceed Text",
        "id": "popup_step1_proceed_text"
      },
      {
        "type": "text",
        "label": "Exit Text",
        "id": "popup_step1_exit_text"
      },
      {
        "type": "header",
        "content": "Email Acquisition"
      },
      {
        "type": "text",
        "label": "Title",
        "id": "popup_step2_title",
        "info": "E.g. Sign up for our newsletter today"
      },
      {
        "type": "richtext",
        "label": "Description",
        "id": "popup_step2_description"
      },
      {
        "type": "text",
        "label": "Placeholder",
        "id": "popup_step2_placeholder"
      },
      {
        "type": "text",
        "label": "Call to action",
        "id": "popup_step2_action_text"
      },
      {
        "type": "text",
        "label": "Escape text",
        "id": "popup_escape_text",
        "info": "Shows at the bottom of the email screen as an option for the user to escape if they are no longer interested."
      },
      {
        "type": "header",
        "content": "Thank You"
      },
      {
        "type": "text",
        "label": "Title",
        "id": "popup_step3_title"
      },
      {
        "type": "richtext",
        "label": "Description",
        "id": "popup_step3_description"
      },
      {
        "type": "text",
        "label": "Call to action",
        "id": "popup_exit_action_text",
        "info": "e.g. Return to Site"
      },
      {
        "type": "richtext",
        "label": "Fine print",
        "id": "popup_step3_fine_print"
      }
    ]
  }