Useful scripts

All scripts you need

Placement

  1. Inpage margin -
    Use when you have an in-page campaign, and you want to move it to a specific place. Link
    {
    "margin-top": "70px",
    "margin-bottom": "70px",
    "margin-left": "70px",
    "margin-right": "70px"

    }
  2. z-index -

    Use when the layers in your campaign are off, the campaign cover native element in the page - Link usually numbers - 10, 999 will fix the problem.

    { "z-index": "10" } 
  3. Inpage Responsive -

    {
    "width": "100%",
    "background": "#f9a11f"
    }
    {
        “width”: “100%“,
        “height”: “100%“,
        “background”: “#000",
        “left”: “0px”,
        “position”: “absolute”
    }
  4. How to make selector better (./#)
    Always make shore that the selector is unique in the page.
    We have 2 diffrent types of selectors : class and id
    you need to take the name of the selector and and in the begining ./#
    1. class - link
    the selctor after the change look like - .banner-content hidden-xxs
    2. id - link
    the selctor after the change look like - #INDWrap
  5. Inpage cover native element with campaign
    1) add selector exactly to covered element
    2) Operation => Append as First child
    3) Add this CSS:
    { "position": "absolute", "top": "0px", "left": "0px" }
    4) if it's don't work, create a task for Niko

Support

  1. Share on WhatsApp
    use when you want the client to press the share button and it will take him to WhatsApp with a custom text and link to the current page.
    1. link options - javascript:window.location=waCurrentPage();
    2. JS button - waCurrentPage = function() {
    return encodeURI("whatsapp://send?text= תראה מה ראיתי באתר מרצדס:" + 'http://' + window.location.hostname + window.location.pathname);
    }
  2. open Facebook messenger chat
    http://m.me/PageName/
  3. SMS ios
    sms: +9725numbers&body=ENCODER
  4. SMS android
    sms: +972numbers /?body= text

Other

  1. copy to clipboard
    Use when you want to add a button that will "copy test" to the user clipboard.
    copy the script to JS output and change the value to the text you need.
    var input = document.createElement("input");
    document.body.appendChild(input);
    input.setAttribute("value", "GFFEA8");
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input);
  2. Add an IFRAME
    Add an embed code(elements-embed) and add this script - don't forget to press apply :)
    <iframe src="WWW.EXAMPLE.COMr=16" width="800" height="640 "> </iframe>
  3. Use when you don't have a link option to the button but want to count it as conventions 
     javascript:void(0)
  4. link not taking me to the page
    Use when you have a button that directs you to URL but the page does not change. 
    add the relevant URL in the script.
    link options - javascript:void(0)
    JS-
    (function() {
    var LINK = 'WWW.THEURL.COM';
    window.open(LINK, '_self');
    })();

    Events

  5. An event that will be sent to adoric 
    This event will be sent only to adoric one in 15 min so be patient.
    Add it to JS output on the button you want to count LINK
    adoric.trigger('YOU_EVENT_NAME');
  6. An event that will be sent to GA
    This event will be sent only to your GA account.
    Add it to JS output on the button you want to count LINK
    window.ga && window.ga("t0.send", "event", {
    eventCategory: "Adoric - קרוסלה סרטון גבות",
    eventAction: "click",
    eventLabel: "מסקרה לגבות"});
  7. Specific Event 

    ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);

Forms

  1. phone validation pattern - link
    pattern="[0-9]{9,10}" 
  2. UTM - add UTM to the URL
    <script>
    (function() {
    function getLbIdentifier() {
    var lbData = null;
    window.adoric && adoric.lightboxes.forEach(function(item) {
    var form = document.querySelector('.' + item.identifier + '.__ADORIC__ [tabindex] form');
    if (item.isShowing === true && form) {
    lbData = item;
    }
    });
    return lbData;
    }

    function getUrlParameter(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    function addHiddenInput(name, val) {
    var inp = document.createElement('INPUT');
    inp.type = 'hidden';
    inp.name = name;
    inp.value = val;
    if (currentForm) {
    currentForm.appendChild(inp);
    }

    }

    var allCampaignData = getLbIdentifier();
    var currentForm = document.querySelector('.' + allCampaignData.identifier + '.__ADORIC__ [tabindex] form');

    if (getUrlParameter('utm_source')) {
    addHiddenInput('utm_source', getUrlParameter('utm_source'));
    }
    if (getUrlParameter('utm_medium')) {
    addHiddenInput('utm_medium', getUrlParameter('utm_medium'));
    }
    if (getUrlParameter('utm_campaign')) {
    addHiddenInput('utm_campaign', getUrlParameter('utm_campaign'));
    }
    if (getUrlParameter('utm_term')) {
    addHiddenInput('utm_term', getUrlParameter('utm_term'));
    }
    if (getUrlParameter('utm_content')) {
    addHiddenInput('utm_content', getUrlParameter('utm_content'));
    }
    })();
    </script>
  3. Add hidden field of email or phone (survey)

    (creating a form with no email or phone number fields)
    1. Create an email field that is visible
    2. Inspect the page and mark the email field
    3. Add a static email for this form - add to the email row with value=“anonimous@mail.com
    4. Hide the field- add to the CSS style on the right a ‘display’ row, with the value ‘noun’
  4. Add to the form link of the page the users submit the form 
    <script>
    (function() {
    var URL_FIELD_NAME = 'URL';
    function getLbIdentifier() {
    var lbData = null;
    window.adoric && adoric.lightboxes.forEach(function(item) {
    var form = document.querySelector('.' + item.identifier + '.__ADORIC__ [tabindex] form');
    if (item.isShowing === true && form) {
    lbData = item;
    }
    });
    return lbData;
    }

    function addHiddenInput(name, val) {
    var inp = document.createElement('INPUT');
    inp.type = 'hidden';
    inp.name = name;
    inp.value = val;
    if (currentForm) {
    currentForm.appendChild(inp);
    }

    }

    var allCampaignData = getLbIdentifier();
    var currentForm = document.querySelector('.' + allCampaignData.identifier + '.__ADORIC__ [tabindex] form');
    var currentURL = window.location.href;
    addHiddenInput(URL_FIELD_NAME, currentURL);
    })();
    </script>

 

Console - different information we can get on the console output 

inspect the page ( F12 ) - go to the console tab, and past the script, and wait to output. 

  1. Tracker + GA sanding event account
    ga('adoric:all');
  2. Traffic sources 
    window.sessionStorage.adoric_referrer_url / document.referrer /
  3. Campaign ID on the editor
    Editor.campaignId

Tool tip - z- index

<script>
(function() {
var currentLBSelector = '.' + self.identifier + '.__ADORIC__ [tabindex]';
var lbNewZindex = 10;
document.querySelector(currentLBSelector).style.zIndex = lbNewZindex;
window.addEventListener("resize", function() {
document.querySelector(currentLBSelector).style.zIndex = lbNewZindex;
});
window.addEventListener("scroll", function() {
document.querySelector(currentLBSelector).style.zIndex = lbNewZindex;
});
})();
</script>

Links to explanation files 

  1. Steps
  2. Test environment
  3. Segment on GA
  4. "999" test
  5. Cart amount
  6. HTMK conditions