Пайдалы JS сценарийлерінің мысалдары

Стандартты емес оқиғаларды жіберу үшін беттегі басуды ұстап қалу немесе функционалды кеңейту
«HTML кодын кірістіру» блогының (Т123, Басқа санат) көмегімен бетке кез келген сценарийді әбден қосуға болады. Кейбір мүмкіндіктерді қосу үшін пайдалануға болатын үлгі кодын біріктірдік.
сілтеме / батырма басу кезінде мақсатқа жету туралы
түймешігімен басу туралы
Қалқымалы терезені ашу туралы
Tilda деректер қабылдағышын жібергеннен кейін
арбадан төлем жүйесінің веб-сайтына өту алдында
кнопкалар/белгiлi бiр сыныпты буындар арқылы iстеп тұрған
Facebook Pixel сайтында
Төменде өзіңіз өзгерту қажет үлгі коды берілгенін және бұл қадамдар Javascript қалай жұмыс істейтінін түсінуді талап ететінін ескеріңіз. Өкінішке орай, біз бөгде кодекстің жұмыс істеуіне байланысты мәселелерге қолдау көрсетпейміз.
Беттегі әр түрлі оқиғаларды ұстап қалу
Егер қалқымалы терезенің ашылуын бақылағымыз келсе, сілтемені басу, пішінді сәтті ұсынғаннан кейін деректерді үшінші тарап қызметіне жіберу, пішінге өз басқару элементтерін ендіру және бізге қажетті қиял жеткілікті болса, ұстап қалу қажет болуы мүмкін.
Сілтемені ұстап алу түймешігін басу
<script>
  if (document.readyState !== 'loading') {
    us_clickInterception();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterception);
  }

  function us_clickInterception() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        /* здесь пишем нужное действие */
      });
    });
  }
</script>
Белгілі бір блоктағы сілтемені ұстап қалу
#rec123456789 блоктағы сілтемені басып алу
<script>
  if (document.readyState !== 'loading') {
    us_clickInterceptionInBlock();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterceptionInBlock);
  }

  function us_clickInterceptionInBlock() {
    var links = document.querySelectorAll('#rec123456789 a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        /* здесь пишем нужное действие */
      });
    });
  }
</script>
мұндағы #rec123456789 — ауа райы виджеті қосылатын блоктың нөмірі;
Блок нөмірін Блок параметрлерінен көруге болады
Сілтемені/түймені басқанда мақсатқа жету туралы оқиғаны Yandex.Metrica-ға жіберу
Көрсетілген скрипт «сілтемемен» бірдей мекенжайға ие кез келген сілтеме/түймешік түймешігін басуды қадағалайды. Егер осындай басу орын алса, «мақсат» оқиғасы метрикаға жіберіледі.
<script>
  if (document.readyState !== 'loading') {
    us_sendMertics();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMertics);
  }

  function us_sendMertics() {
    var links = document.querySelectorAll('[href="любая_ссылка"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('произвольная_цель');
        }
      });
    });
  }
</script>
мұндағы XXXXXX — есептеуіштің саны;
Сыртқы сілтеме/түймені басқанда мақсатқа жету туралы оқиғаны Yandex.Metrica-ға жіберу
Көрсетілген сценарий мекенжайлары «сілтемеге» сәйкес келетін кез келген сыртқы сілтеме/батырманың басуын қадағалайды. Егер осындай басу орын алса, «мақсат» оқиғасы метрикаға жіберіледі.
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByClickOnExternalLink();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByClickOnExternalLink);
  }

  function us_sendMerticsByClickOnExternalLink() {
    var links = document.querySelectorAll('[href="ваша_ссылка"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        var url = link.getAttribute('href');
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('цель');
        }
        if (url && url.indexOf('http://') !== -1) {
          setTimeout(function () {
            window.location.href = url;
          }, 500);
        }
      });
    });
  }
</script>
мұндағы XXXXXX — есептеуіштің саны;
Жіберу түймешігі оқиғаларды басу мысалы
Екі түйме бар, біреуі бір бетке, ал екіншісі басқа бетке орналастырылған мәтіні бар блокқа апарады. Бірінші батырмада #rec12345678 блоктауға арналған зәкір бар, ал екіншісінде сыртқы бетке сілтеме http://help-ru.tilda.cc/
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByClickOnBtn();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByClickOnBtn);
  }

  function us_sendMerticsByClickOnBtn() {
    var internalLinks = document.querySelectorAll('[href="#rec123456789"]');
    var externalLinks = document.querySelectorAll('[href="http://help-ru.tilda.ws"]');
    Array.prototype.forEach.call(internalLinks, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('CLICK1');
        }
      });
    });
    Array.prototype.forEach.call(externalLinks, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('CLICK2');
        }
      });
    });
  }
</script>
мұндағы yaCounterXXXXXXX - сөре саны;
Оқиғаны Яндексқа жіберу. Қалқымалы терезені ашу көрсеткіші
Барлық басуларды қуып жетіп, егер басылған сілтеме «#popup:...» деп көрсетсе, онда бет көрінісі оқиғасын метрикаға жіберіңіз, себебі қалқымалы терезе де бет болып табылады, ал бет көрінісін бақылау немесе композициялық мақсат құру оңай (мысалы: бет ашу, қалқымалы терезені ашу, пішінді ұсыну)

Төмендегі кодтың жұмыс істеуі үшін оны HTML блогына орналастыру керек, ол ең жоғарғы жағында болуы тиіс
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByPopup();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByPopup);
  }

  function us_sendMerticsByPopup() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (link.href && link.href.substring(0, 7) === '#popup:' && window.mainMetrika > '' &&
          window[window.mainMetrika]) {
          var virtPage = window.location.pathname + '/popup/' + link.href.substring(7);
          var virtTitle = link.textContent;
          window[window.mainMetrika].hit(virtPage, {
            title: virtTitle,
            referer: window.location.href,
          });
        }
      });
    });
  }
</script>
Оқиғаны Яндексқа жіберу. Арбаға бұйымды қосу туралы көрсеткіш
Көрсетілген сценарий Арбаға қосу түймешігін басуды қадағалайды. Егер мұндай басу орын алса, «AddToCart» мақсаты метрикаға жіберіледі.
<script>
  if (document.readyState !== 'loading') {
    us_sendMerticsByCart();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendMerticsByCart);
  }

  function us_sendMerticsByCart() {
    var links = document.querySelectorAll('[href^="#order"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function () {
        if (window.mainMetrikaId !== undefined) {
          yaCounterXXXXXX.reachGoal('AddToCart');
        }
      });
    });
  }
</script>
мұндағы yaCounterXXXXXXX — санауыштың нөмірі;
AddToCart — Yandex.Metrica бағдарламасындағы реттелетін мақсат атауы;
Сілтеме / батырма түймешігін басу туралы ақпаратты Google Analytics-ке жіберу
Скрипт өз мекенжайындағы «url мекенжайындағы мән» бар кез келген сілтеме/түймешіктің басылуын қадағалайды. Егер мұндай басу орын алса, басу туралы ақпарат жіберіледі. Төменде кодтың үлгісі берілген. Ауыстыруға жататын мәндер капиталдандырылады.
<script>
  if (document.readyState !== 'loading') {
    us_sendGoogleAnalytics();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendGoogleAnalytics);
  }

  function us_sendGoogleAnalytics() {
    var links = document.querySelectorAll('a');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function (e) {
        if (link.href && link.href.indexOf('ЗНАЧЕНИЕ В URL') !== -1) {
          e.preventDefault();
          ga('send', {
            'hitType': 'pageview',
            'page': '/click' + window.location.pathname,
            'title': 'НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ',
          });
          setTimeout(function () {
            window.location = link.href;
          }, 200);
        }
      });
    });
  }
</script>
VALUE IN URL — мұнда сілтемедегі кез келген сөзді қою керек. Мысалы, түймені басқанда келуші тіркеу бетіне мына мекенжай бойынша түседі: http://mysite.com/registration. Бұл жағдайда URL мекенжайындағы VALUE орнына тіркеуді көрсетіңіз.

ВИРТУАЛДЫ БЕТТІҢ АТАУЫ. Google Analytics қызметіндегі түймені басу туралы ақпарат виртуалды бет көрінісі статистикасы түрінде пайда болады. Бет виртуалды, сондықтан ол кез келген нәрсе болуы мүмкін.

СІЛТЕМЕ — түймедегі сілтеме. Мысалы, http://mysite.com/registration

Мақсат жетістігі ретінде түймешігімен басуды қадағалау үшін Google Analitycs: Реттелетін мақсат → қондыру беті → Бастау /басу/
Тильда деректерін қабылдағышқа жібергеннен кейін формулярды ресурсқа жіберу
Барлық пішіндерден өтіп, деректерді сәтті жібергеннен кейін пішін өзін атайтын функцияның атауын жазыңыз
<script>
function mySuccessFunction(form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* все поля заявки в */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      if (input.type === 'radio') {
        if (input.checked) obj[input.name] = input.value;
     } else {
       obj[input.name] = input.value;
     }
   });
    /*
    для обращения к значению поля используйте:
    obj["Name"]
    obj["Phone"]
    obj["Email"]
    и так далее...
    */
  }

  if (document.readyState !== 'loading') {
    us_sendFormAfterSuccess();
  } else {
    document.addEventListener('DOMContentLoaded', us_sendFormAfterSuccess);
  }

  function us_sendFormAfterSuccess() {
    var forms = document.querySelectorAll('.js-form-proccess');
    Array.prototype.forEach.call(forms, function (form) {
      form.addEventListener('tildaform:aftersuccess', function () {
        mySuccessFunction(form);
      });
    });
  }
</script>
Нөл блогы пішінінен деректерді ресурсқа жіберу
<script>
  function t396_onSuccess(form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* Все поля заявки */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* Отправляем данные POST-запросом */
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://yourwebhook.ru/form.php');
    xhr.send(JSON.stringify(obj));
    xhr.onload = function () {
      if (xhr.response) {
        /* Какие-то действия, если данные дошли успешно */

        /* Переадресация на страницу успеха */
        var successUrl = form.getAttribute('data-success-url');
        if (successUrl) window.location.href = successUrl;
      }
    };
  }
</script>
Арбадан төлем жүйесінің веб-сайтына өту алдында функцияны орындау
Егер арбаның мазмұны туралы ақпаратты cookie файлына қосу немесе электрондық коммерция оқиғаларын Google Analytics немесе Yandex.Metrica-ға жіберу қажет болса, біз мұны жоғарыда аталған сценарийді пайдаланып жасай аламыз. Сценарий төлем жүйесіне бармас бұрын немесе төлем виджетін шақырғанға дейін оңға қарай аталады.
<script>
  window.myAfterSendedFunction = function (form) {
    if (!form) return;
    if (form instanceof jQuery) {
      form = form.get(0);
    }

    /* номер заявки (Lead ID) */
    var leadId = form.tildaTranId;
    var orderId = form.tildaOrderId;

    /* все поля заявки */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* здесь нужно написать код отправки данных в нужное место, например в свой скрипт или добавление данных в cookie */
  };

  if (document.readyState !== 'loading') {
    us_eventFromCartToPayment();
  } else {
    document.addEventListener('DOMContentLoaded', us_eventFromCartToPayment);
  }

  function us_eventFromCartToPayment() {
    var forms = document.querySelectorAll('.js-form-proccess');
    Array.prototype.forEach.call(forms, function (form) {
      form.addEventListener('tildaform:aftersuccess', function () {
        window.myAfterSendedFunction(form);
      });
    });
  }
</script>
Түймешіктерді/сілтемелерді белгілі бір сыныппен іске қосатын бөгде қызмет
Мысалы, егер түймені басқанда қажетті қызмет арнайы диалогты ашса, онда қызмет сценарийімен жұмыс істеу процедурасын орындау маңызды. Ақауларды болдырмау үшін алдымен түймешіктерге арналған сабақтарды қосып, содан кейін сценарийді кірістіресіз:
<script>
  if (document.readyState !== 'loading') {
    us_customDOMChanges();
  } else {
    document.addEventListener('DOMContentLoaded', us_customDOMChanges);
  }

  function us_customDOMChanges() {
    var buttons = document.querySelectorAll('.t-btn');
    Array.prototype.forEach.call(buttons, function (button) {
      /* добавляем свой класс к кнопкам */
      button.classList.add('superclass');
    });

    /* добавляем скрипт для загрузки сервиса */
    var service = document.createElement('script');
    service.src = 'https://superservice.com/script.js';
    service.type = 'text/javascript';
    service.charset = 'UTF-8';
    document.documentElement.appendChild(service);
  }
</script>
Мобильді және жұмыс үстелі клиенттері үшін әр түрлі виджеттерді іске қосу
Кейде жұмыс үстеліне арналған көлемді виджетті, ал мобильді параметр үшін кішкентай виджетті кірістіру қажет. Ол үшін біздің көмекке window.isMobile айнымалысы келеді
<script>
  if (document.readyState !== 'loading') {
    us_initAdaptiveWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_initAdaptiveWidget);
  }

  function us_initAdaptiveWidget() {
    if (window.isMobile == true) {
      /* код для мобильных клиентов*/
    } else {
      /* код для десктопных клиентов*/
    }
  }
</script>
Аралас виджетті кірістіру мысалы
Вместо условия window.isMobile можно использовать размеры экрана, например, window.innerWidth < 960
<div id="widgetbox" style="text-align: center;">
    <div class="left" id="_bn_widget_"><a href="http://bnovo.ru/" id="_bnovo_link_" target="_blank">Bnovo</a></div>
    <script type="text/javascript" src="http://widget.bnovo.ru/v2/js/bnovo.js"></script>
</div>

<script>
  if (document.readyState !== 'loading') {
    us_appendMixedWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_appendMixedWidget);
  }

  function us_appendMixedWidget() {
    var html = '';
    if (window.isMobile == true) {
      /* код для мобильных клиентов*/
      html = '<script>';
      html += 'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "vertical",lcode: "1234567890",lang: "ru",width: "230",background: "#ffda4a",bg_alpha: "100",padding: "18",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});';
      html += '</script' + '>';
    } else {
      /* код для десктопных клиентов */
      html = '<script>' +
        'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "horizontal",lcode: "1234567890",lang: "ru",width: "960",background: "#ffda4a",bg_alpha: "100",padding: "20",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});' +
        '</script' + '>';
    }
    var widgetBox = document.querySelector('#widgetbox');
    if (widgetBox) widgetBox.insertAdjacentHTML('beforeend', html);
  }
</script>
Мәзірді нөлдік блокта жасау әдісі
Бұл параметр енді Zero Block өңдегішіне құрылған. Блокты бұғаттауды қосу үшін Артборд параметрлеріне → Орны және Толып кету бөліміне өтіп, оны Түзетілген параметріне орнатыңыз. → жасау параметрлері туралы қосымша ақпарат алыңыз
Қорғасын деректерін Facebook Pixel желісіне автоматты түрде беруге жол бермеу
Facebook Pixel бағдарламасын орнатсаңыз, fbq нысаны Facebook-ке формуляр ұсынылғанда Жетекші оқиғаны жіберетін бетте пайда болады. Егер Facebook пикселіңізді өзіңіз реттегіңіз келсе, кодты пайдалану арқылы осы мінез-құлықты өшіруге болады:
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Facebook және Instagram әлеуметтік желілеріне иелік ететін Meta Платформалар Inc., 03.21.2022 жылғы сот шешімімен экстремистік ұйым ретінде танылды, оның қызметіне Ресейде тыйым салынған.
Жоғарыда айтылғандар өзіңіз өзгерту қажет үлгі коды екенін ескеріңіз және бұл қадамдар Javascript қалай жұмыс істейтінін түсінуді талап етеді. Өкінішке орай, біз бөгде кодекстің жұмыс істеуіне байланысты мәселелерге қолдау көрсетпейміз.
20__ жылғы «___» __________
Тильда