Untitled
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">×</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>