Useful scripts

All scripts you need

Placement

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"  
   
}

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" } 
```

Inpage Responsive -

{
  "width": "100%",
  "background": "#f9a11f"
}

{
    “width”: “100%“,
    “height”: “100%“,
    “background”: “#000",
    “left”: “0px”,
    “position”: “absolute”
}

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

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

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);
}

open Facebook messenger chat
```
http://m.me/PageName/
```
SMS ios
```
sms: +9725numbers&body=ENCODER
```
SMS android
```
sms: +972numbers /?body= text
```

Other

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);

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>
```
Use when you don't have a link option to the button but want to count it as conventions
```
 javascript:void(0)
```
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
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');
```

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: "מסקרה לגבות"});

Specific Event

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

Forms

phone validation pattern - link
```
pattern="[0-9]{9,10}" 
```

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>

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’

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.

Tracker + GA sanding event account
```
ga('adoric:all');
```

Traffic sources

window.sessionStorage.adoric_referrer_url / document.referrer /

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

Steps
Test environment
Segment on GA
"999" test
Cart amount
HTMK conditions