Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
15 kB
2
Indexable
Never
<script>
  
  (function () {
	try {
	  /* main variables */
	  var debug = 0;
	  var variation_name = "";
  
	  /* all Pure helper functions */
  
	  function waitForElement(selector, trigger, delayInterval, delayTimeout){
		var interval = setInterval(function () {
		  if (
			document &&
			document.querySelector(selector) &&
			document.querySelectorAll(selector).length > 0
		  ) {
			clearInterval(interval);
			trigger();
		  }
		}, delayInterval);
		setTimeout(function () {
		  clearInterval(interval);
		}, delayTimeout);
	  }
  
	  function live(selector, event, callback, context) {
		  // helper for enabling IE 8 event bindings
		  function addEvent(el, type, handler) {
			if (el.attachEvent) el.attachEvent("on" + type, handler);
			else el.addEventListener(type, handler);
		  }
		  // matches polyfill
		  this &&
			this.Element &&
			(function(ElementPrototype) {
			  ElementPrototype.matches =
				ElementPrototype.matches ||
				ElementPrototype.matchesSelector ||
				ElementPrototype.webkitMatchesSelector ||
				ElementPrototype.msMatchesSelector ||
				function(selector) {
				  var node = this,
					nodes = (node.parentNode || node.document).querySelectorAll(selector),
					i = -1;
				  while (nodes[++i] && nodes[i] != node);
				  return !!nodes[i];
				};
			})(Element.prototype);
		  // live binding helper using matchesSelector
		  function live(selector, event, callback, context) {
			addEvent(context || document, event, function(e) {
			  var found,
				el = e.target || e.srcElement;
			  while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
			  if (found) callback.call(el, e);
			});
		  }
		  live(selector, event, callback, context);
		}
  
    function getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
  }

  function setCookie(name,value,days) {
      var expires = "";
      if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days*24*60*60*1000));
          expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }


  var formPopup =''+ 
  '  <div class="eg-form-popup">'+ 
  '      <div class="eg-form-popup-inr">'+ 
  '          <div class="eg-form-container">'+ 
  '             <span class="eg-form-close">&times;</span>'+
  '             <form method="POST" class="edb-survey gf" id="edb-survey" data-step="1">'+
	'								<div id="step1" class="fg" data-section="1"><label class="fl">Qu\'est-ce qui vous a poussé à acheter sur notre site ?</label><textarea type="text" name="motivation" placeholder="Votre réponse..." rows="4" class="fc"></textarea></div>'+
	'								<div id="step2" class="fg" data-section="2"><label class="fl">Avez-vous considéré d\'autres enseignes avant d\'acheter sur notre site ? Si oui, quelles enseignes ?</label><textarea type="text" name="competition" placeholder="Votre réponse..." rows="4" class="fc"></textarea></div>'+
	'								<div id="step3" class="fg" data-section="3"><label class="fl">Qu\'est-ce qui a failli vous empêcher d\'acheter sur notre site ?</label><textarea type="text" name="objection" placeholder="Votre réponse..." rows="4" class="fc"></textarea></div>'+
	'								<div id="step4" class="fg" data-section="4"><label class="fl">Quelle était la source de frustration principale quand vous recherchiez un produit correspondant à votre besoin ?</label><textarea type="text" name="product" placeholder="Votre réponse..." rows="4" class="fc"></textarea></div>'+
	'								<div id="step5" class="fg" data-section="5"><label class="fl">Que peut-on faire pour améliorer la prise de commande sur notre site ?</label><textarea type="text" name="checkout" placeholder="Votre réponse..." rows="4" class="fc"></textarea></div>'+
	'								<div id="step6" class="fg" data-section="6"><label class="fl">Recommanderiez-vous notre site à vos proches ?</label><label class="flradio"><input type="radio" name="nps" value="1">1</label><label class="flradio"><input type="radio" name="nps" value="2">2</label><label class="flradio"><input type="radio" name="nps" value="3">3</label><label class="flradio"><input type="radio" name="nps" value="4">4</label><label class="flradio"><input type="radio" name="nps" value="5">5</label><label class="flradio"><input type="radio" name="nps" value="6">6</label><label class="flradio"><input type="radio" name="nps" value="7">7</label><label class="flradio"><input type="radio" name="nps" value="8">8</label><label class="flradio"><input type="radio" name="nps" value="9">9</label><label class="flradio"><input type="radio" name="nps" value="10">10</label></div>'+
  '								<div class="edb-action" ><div class="edb-btn" id="previous">Précédent</div><div class="edb-btn" id="next">Suivant</div><button class="edb-btn" id="close" >Terminer</button></div>'+
  '             </form>'+ 
  '             <p class="eg-thanks">Nous vous remercions pour votre participation</p>'+
  '          </div>'+ 
  '      </div>'+ 
  '  </div>';
  

  var offset;
    
  function createSession() {
    if(getCookie('firstVisit') == null) {
      setCookie('firstVisit', '1',365);
    }
  }

	  function init() {
  
		  document.querySelector('body footer').insertAdjacentHTML('afterend', formPopup);
		   
		  live(".eg-form-popup .eg-form-close", "click", function() {
			  createSession();
        document.querySelector('body').classList.add('form-popup-hide');
		  });
		  live('.eg-form-popup button','click',function(e){
			e.preventDefault();
      //var email = document.querySelector('input[type="email"]').value;
			//var name= document.querySelector('input[name="Name"]').value;
			var motivation= document.querySelector('textarea[name="motivation"]').value;
			var competition= document.querySelector('textarea[name="competition"]').value;
			var objection= document.querySelector('textarea[name="objection"]').value;
			var product= document.querySelector('textarea[name="product"]').value;
			var checkout= document.querySelector('textarea[name="checkout"]').value;
			var nps;
			var spn= document.querySelector('input[name="nps"]:checked'); console.log(spn);
			if (typeof(spn) != 'undefined' && spn != null) {
				console.log('spn known');
				var nps = spn.value;
			} else {
				console.log('spn unknown, set value');
				var nps = "none";
			}
			console.log(nps);
			sendData(motivation,competition,objection,product,checkout,nps);
		  });
	  }
	  function sendData(motivation,competition,objection,product,checkout,nps){
		var url = "https://script.google.com/macros/s/AKfycbzzeQM06h-TXkXhi4fa1qxHayf__JwVAF0Fd1WS4IkwzkuLIPc6rwcObuwB5K1oaYqt/exec";
		 var XHR = new XMLHttpRequest(),
		 FD = new FormData();
	   // Push our data into our FormData object
	   //FD.append('Email',email);
	   //FD.append('Name',name);
	   FD.append('Motivation',motivation);
	   FD.append('Competition',competition);
	   FD.append('Objection',objection);
	   FD.append('Product',product);
	   FD.append('Checkout',checkout);
	   FD.append('NPS',nps);
	   XHR.onreadystatechange = function () {
		 if (this.readyState == 4 && this.status == 200) {
		  //console.log('success');
		 
		  document.querySelector('.eg-form-popup form').style.display = "none";
		  hideForm();
		 }
	   };
	   // Set up our request
	   XHR.open('POST', url);
	   // Send our FormData object; HTTP headers are set automatically
	   XHR.send(FD);
	   }

	   function hideForm(){
		createSession();
		document.querySelector('.eg-form-popup .eg-thanks').style.display='block';
		   /*setTimeout(function(){
			document.querySelector('.eg-form-popup').remove();
		   },5000);*/
		   
	   }

	document.addEventListener('click', function (event) {
	   //console.log("clicked");
	   if(!event.target.matches('.edb-survey #next, .edb-survey #previous')) return;
	   //console.log('matched');
	   var cur = document.querySelector('.edb-survey').getAttribute('data-step'); //console.log('data-step =>', cur);
	   var act = cur;
	   if(event.target.matches('.edb-survey #next')) {
	      var act = parseInt(cur) + 1;
	   } else if (event.target.matches('.edb-survey #previous')) {
	      var act = parseInt(cur) - 1;
	   }
	   //console.log('new step =>', act);
	   document.querySelector('.edb-survey').setAttribute('data-step', act);
	   //console.log('step changed');
   });

	document.addEventListener('click', function (event) {
	   //console.log("clicked");
	   if(!event.target.matches('.flradio')) return;
	   //console.log('matched');
	   var flr = document.querySelectorAll('.flradio');
	   for(f=0;f<flr.length;f++) {
	   	if(flr[f].classList.contains('flradiochecked')) {
	   		flr[f].classList.remove('flradiochecked');
	   	}
	   }
	   event.target.classList.add('flradiochecked');
	   var cur = document.querySelector('.edb-survey').getAttribute('data-step'); //console.log('data-step =>', cur);
	   var act = cur;
	   if(event.target.matches('.edb-survey #next')) {
	      var act = parseInt(cur) + 1;
	   } else if (event.target.matches('.edb-survey #previous')) {
	      var act = parseInt(cur) - 1;
	   }
	   //console.log('new step =>', act);
	   document.querySelector('.edb-survey').setAttribute('data-step', act);
	   //console.log('step changed');
   });


	  /* Initialise variation */
    //if(!getCookie('firstVisit')){
      waitForElement("body footer", init, 100, 25000);
    //}
	} catch (e) {
	  if (debug) console.log(e, "error in Test" + variation_name);
	}
  })();
  
</script>

<style>
  
  
html body.form-popup-hide .eg-form-popup {
    display: none;
}
.eg-form-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: auto;
    z-index: 999;
    max-width: 600px;
}
.eg-form-popup .eg-form-popup-inr {
    background: #000000;
    padding: 15px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 12px 0px rgb(255 255 255 / 20%);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255,255,255,0.20);
    box-shadow: 0px 0px 12px 0px rgb(255 255 255 / 20%);
}
.eg-form-container .eg-form-close {
    position: absolute;
    top: 18px;
    right: 18px;
    line-height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    padding: 2px;
    cursor: pointer;
    color: #ffffff;
}
.eg-form-container .eg-form-close:hover {
    color: #fae016;
}

.eg-form-popup input {
    padding: 5px 5px 5px 10px;
    margin-right: 5px;
    height: 35px;
    border: none;
}

.eg-form-popup button {
    background: #fae016;
    padding: 0px 11px;
    height: 35px;
    box-sizing: border-box;
    border: 1px solid #fae016;
}
.eg-form-popup button:hover {
    border: 1px solid #fae016;
    background: #000000;
    color: #fae016;
}
.eg-form-popup input:focus {
    outline: none;
}



@media screen and (max-width:600px) {
    html body .eg-form-popup {
        bottom: 0px;
        right: 0px;
        width: 100%;
    }
    
    html body .eg-form-popup .eg-form-popup-inr form {
        flex-direction: column;
        display: flex;
        width: 100%;
        margin: 0 auto;
    }
    
    html body .eg-form-popup input {
        margin-right: 0px;
        margin-bottom: 10px;
    }
    /*.eg-form-popup .eg-form-popup-inr {
        padding-top: 30px;
        padding-right: 15px;
    }*/
    .eg-form-popup .eg-form-popup-inr {
        border-radius: 0px;
    }
}
.eg-thanks {
    color: #ffff;
    text-align: center;
    margin: 0px;
    font-size: 20px;
    font-weight: 500;
    display: none;
    padding-right: 35px;
}

form.gf {
    font-family: Rubik,sans-serif;
    font-size: 1.6rem;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

.edb-survey .edb-button {
    display:  inline-block;
  }
  .edb-survey[data-step='6'] .edb-action button {
    width: 50%;
  }
  .edb-survey .fg {
    display: none;
  }
  .edb-survey[data-step='1'] .fg[data-section='1'],
  .edb-survey[data-step='2'] .fg[data-section='2'],
  .edb-survey[data-step='3'] .fg[data-section='3'],
  .edb-survey[data-step='4'] .fg[data-section='4'],
  .edb-survey[data-step='5'] .fg[data-section='5'],
  .edb-survey[data-step='6'] .fg[data-section='6'] {
    display: block;
  }
  .edb-survey .edb-action {
    display: flex;
    justify-content: end;
  }
  .edb-survey .edb-action button#close {
    display: none;
  }
  .edb-survey[data-step='6'] .edb-action button#close {
    display: block;
  }
  .edb-survey[data-step='6'] .edb-action #next {
    display: none;
  }
  .edb-survey[data-step='1'] .edb-action #previous {
    display: none;
  }

.gtm-popup.gtm-config .popup.bottomright {
      background: #000;
    padding: 15px;
    color: #fff;
    font-family: Rubik,sans-serif;
    font-size: 1.6rem;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
.gtm-popup.gtm-config .popup .close {
    font-size: 28px;
    color: #585858;
    opacity: 1;
    font-weight: 100;
    border: 2px solid #585858;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 26px;
    top: 10px;
    right: 10px;
}
.gtm-popup.gtm-config .popup .close:hover {
    color: #fae017;
    border-color: #fae017;
    opacity: 1;
}
form.gf .fl {
  text-align: left;
    font-size: 20px;
    line-height: 1.1;
    padding-right: 35px;
    margin-bottom: 15px !important;
    margin-top: 0px;
    color: #fff;
    cursor: initial;
}
form.gf .fc {
  border: 0px solid #000;
    font-family: Rubik,sans-serif;
    font-size: 18px;
    padding: 10px 12px;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-bottom: 15px;
}
.edb-survey #previous {
      background: #000000;
    border: 2px solid #fae017;
    border-radius: 3px;
    width: 50%;
    margin-right: 5px;
    color: #fae017;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 15px 10px;
    text-align: center;
    cursor: pointer;
  }
.edb-survey #next {
      background: #fae017;
    border: 1px solid #fae017;
    border-radius: 3px;
    width: 50%;
    margin-left: 5px;
    color: #000;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 15px 10px;
    text-align: center;
    cursor: pointer;
}
.edb-survey[data-step='6'] .edb-action button#close {
  background: #fae017;
    border: 1px solid #fae017;
    border-radius: 3px;
    width: 50%;
    color: #000;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px;
    height: auto;
    margin: 0;
    margin-left: 5px;
    font-size: inherit;
    line-height: inherit;
}
.flradio {
    border: 2px solid #fae017;
    border-radius: 3px;
    color: #fae017;
    text-align: center;
    padding: 10px 10px;
    margin-bottom: 20px;
    margin-right: 5px;
}
.flradio input[type=radio] {
    display: none;
}
.flradio:hover, .flradiochecked {
    background: #fae017;
    color: #000;
}
#step6 label.fl {
    display: block;
}
  
</style>