Comment ajouter un script à la page

Découvrez comment ajouter des fonctionnalités avancées à votre site web
Vous pouvez ajouter n'importe quel script à votre site web. Ajoutez un bloc T123 ("Intégrer un code HTML") de la catégorie "Autres" à la page et intégrez-y le script. Voici une sélection d'exemples de codes que vous pouvez utiliser pour étendre les fonctionnalités de votre site web.
Après l'avoir transféré au service de saisie des données Tilda
Avant d'amener le visiteur du site web du panier d'achat au site web du système de paiement
Répondre aux clics sur des liens ou des boutons de classes spécifiques
Veuillez noter que vous devrez peut-être modifier les exemples de code de ce guide avant de les utiliser sur votre site web. Il se peut que vous deviez comprendre le fonctionnement de JavaScript pour continuer. Malheureusement, Tilda ne fournit pas d'assistance pour les problèmes liés à l'utilisation de code tiers.
Interception d'événements
sur la page web
L'interception d'événements est très utile lorsque vous devez suivre les événements liés aux fenêtres pop-up, aux clics sur les liens ou aux transferts de données à un tiers après la soumission d'un formulaire, et bien plus encore, en fonction de ce dont vous avez besoin ou de ce que vous aimeriez essayer.
Script d'interception des clics sur les liens
<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 () {
        /* write action type */
      });
    });
  }
</script>
Script pour intercepter les clics de liens dans un bloc spécifique
Voici comment intercepter les clics sur les liens dans le bloc #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 () {
        /* write action type */
      });
    });
  }
</script>
où #rec123456789 est l'ID du bloc où le widget météo sera placé.

Vous pouvez trouver l'ID du bloc dans le panneau Paramètres du bloc.
Script de suivi des événements de clics sur les boutons
Il y a deux boutons, l'un menant à un bloc de texte sur la même page, l'autre à une page différente. Le premier bouton a une ancre pour le bloc #rec12345678, et le second contient un lien vers la page externe http://help-ru.tilda.ws.
<script> 
$(document).ready(function () {
    $("[href='#rec123456789']").click(function () {
        yaCounterXXXXXX.reachGoal('CLICK1');
    });

    $("[href='http://help-ru.tilda.ws/']").click(function () {
        yaCounterXXXXXX.reachGoal('CLICK2');
    });
});
</script>
où XXXXXX est l'ID du compteur.
Script permettant d'envoyer des informations sur les clics de liens ou de boutons à Google Analytics
Vous pouvez utiliser ce script pour suivre les clics sur tout lien ou bouton dont l'adresse contient "une valeur dans l'URL". Si un tel clic se produit, vous en serez informé. Vous trouverez ci-dessous un exemple de code. Les valeurs à remplacer sont en MAJUSCULES.
<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 Value') !== -1) {
          e.preventDefault();
          ga('send', {
            'hitType': 'pageview',
            'page': '/click' + window.location.pathname,
            'title': 'Virtual page name',
          });
          setTimeout(function () {
            window.location = link.href;
          }, 200);
        }
      });
    });
  }
</script>
VALEUR DE L'URL - Il convient d'insérer ici n'importe quel mot figurant dans le lien. Par exemple, en cliquant sur un bouton, le visiteur est dirigé vers la page d'inscription : http://mysite.com/registration. Remplacez ici la VALEUR DE L'URL par "inscription".

NOM DE LA PAGE VIRTUELLE. Dans Google Analytics, les informations relatives à un clic sur un bouton apparaissent dans les statistiques d'affichage de la page virtuelle.

LINK - lien figurant sur un bouton. Par exemple, http://mysite.com/registration.

Pour suivre un clic sur un bouton en tant que réalisation d'un objectif, créez un nouvel objectif dans Google Analytics : Objectif personnalisé → Page d'atterrissage → Commence par / clic /
Script pour envoyer les données du formulaire à votre ressource après les avoir transférées au service de capture de données Tilda
Veuillez insérer le nom de la fonction que les formulaires doivent appeler après un transfert de données réussi dans tous les formulaires de votre site.
<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;

    /* fields in the lead */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });
    /*
    to address to field value use:
    obj["Name"]
    obj["Phone"]
    obj["Email"]
    etc. 
    */
  }

  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 permettant d'exécuter une fonction personnalisée avant d'amener le visiteur du site web du panier d'achat au site web du système de paiement
Si vous avez besoin d'ajouter des informations sur le contenu du panier d'achat aux cookies ou d'envoyer des événements de commerce électronique à Google Analytics ou Yandex.Metrica, utilisez le script décrit ci-dessus. Le script est appelé juste avant que le client ne soit redirigé vers la page du système de paiement ou que le widget de paiement ne soit lancé.
<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;

    /* fields in the lead */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* here you should write a data sending code to the destination, e.g. data receiving to your script or data adding in 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>
Comment connecter un service personnalisé ou tiers
Script pour un service tiers répondant aux clics sur des liens ou des boutons de classes spécifiques
Par exemple, si le service requis ouvre une boîte de dialogue spéciale lorsque l'on clique sur un bouton, vous devez appliquer le script du service en utilisant la bonne méthode. Pour éviter les erreurs, spécifiez d'abord les classes des boutons et intégrez le script ensuite.
<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) {
      /* add custom class to buttons */
      button.classList.add('superclass');
    });

    /* add service script */
    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>
Comment placer un widget spécial au-dessus d'un bloc ?
Parfois, vous souhaitez ajouter quelque chose de spécial aux blocs existants, comme l'ajout d'un formulaire à Zero Block ou d'un widget météo à la couverture de la page. Tilda rend cela possible. Il vous suffit d'ajouter un bloc HTML.
Script pour ajouter un widget météo sur un bloc
Ajoutez un bloc HTML à la page. Allez sur le site web pogoda.yandex.ru, copiez le code du widget, cliquez sur Contenu et créez la magie. Incorporez ce code dans le bloc spécifique (le widget météo), juste à droite du centre du bloc.
<script>
$(document).ready(function () {
    var widget = $('<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://pogoda.yandex.ru/213" target="_blank"><img src="//info.weather.yandex.net/213/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>');
    widget.attr('style', 'display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;');
    $('#rec123456789').append(widget);
});
</script>
où #rec123456789 est l'ID du bloc où le widget météo sera placé.

Vous pouvez trouver l'ID du bloc dans le panneau Paramètres du bloc.
Script pour lancer différents widgets sur mobile et desktop
Il est parfois nécessaire d'insérer un widget volumineux pour la version de bureau du site web et un petit widget pour la version mobile. Pour ce faire, vous devez utiliser la variable "window.isMobile".
<script>
  if (document.readyState !== 'loading') {
    us_initAdaptiveWidget();
  } else {
    document.addEventListener('DOMContentLoaded', us_initAdaptiveWidget);
  }

  function us_initAdaptiveWidget() {
    if (window.isMobile == true) {
      /* code for mobile devices */
    } else {
      /* code for desktop devices */
    }
  }
</script>
Script pour l'ajout d'un widget mixte
Instead of window.isMobile, you can use screen sizes, for example, $(window).width () <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) {
      /* code for mobile devices */
      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 {
      /* code for desktop devices */
      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>
Comment créer un menu dans Zero Block
Pour que le menu créé dans Zero Block se comporte comme un menu normal, c'est-à-dire qu'il se superpose au bloc suivant et se fixe au défilement, vous devez ajouter ce code à la page, en remplaçant rec000000000 par l'ID de votre Zero Block.
<style>
    /* Replace rec00000000 with Zero block ID */
    #rec00000000 {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 9998;
    }
</style>
Script permettant l'interaction entre un script tiers et un formulaire en Zero Block
<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;

    /* all lead fields */
    var obj = {};
    var inputs = form.elements;
    Array.prototype.forEach.call(inputs, function (input) {
      obj[input.name] = input.value;
    });

    /* Send data via POST-request */
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://yourwebhook.ru/form.php');
    xhr.send(JSON.stringify(obj));
    xhr.onload = function () {
      if (xhr.response) {
        /* Actions if data was received successfully */

        /* Redirection to the success page */
        var successUrl = form.getAttribute('data-success-url');
        if (successUrl) window.location.href = successUrl;
      }
    };
  }
</script>
Script pour désactiver les transferts automatiques de données de prospects vers Facebook Pixel
Si vous installez Facebook Pixel, un objet fbq apparaîtra sur la page et vous enverra des informations sur l'événement Lead lorsque les données du formulaire sont transférées à Facebook. Si vous avez besoin d'un pixel Facebook personnalisé, vous pouvez désactiver ce comportement à l'aide de ce code :
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            var allRec = document.getElementById('allrecords');
            if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
        });
  </script>
Veuillez noter qu'il vous incombe de modifier les exemples de code utilisés ci-dessus. L'utilisation de ces exemples nécessite de comprendre le fonctionnement de JavaScript. Malheureusement, nous ne fournissons pas d'assistance pour les problèmes liés à l'utilisation de codes tiers.
Fabriqué le
Tilda