Comment installer le pixel Convertize pour qu’il soit asynchrone

Charger le pixel en mode synchrone (Exemple #1)

Comme expliqué dans un autre article, le pixel Convertize donné lors de la création d’un projet est synchrone afin d’éviter l’affichage bref de la page d’origine avant l’affichage de la variation contenant les changements. Votre pixel devrait avoir la même structure que l’exemple ci-dessous :

<script src="//pixel.convertize.io/1177.js" charset="UTF-8"></script>

Cependant, Convertize permet à l’utilisateur de charger le pixel en mode asynchrone.

Charger le pixel en mode asynchrone (Exemple #2)

Pour permettre à la page de charger en même temps que le pixel, vous devez ajouter manuellement l’attribut « async » dans le pixel entre « .js » et « ></script> » en laissant un espace blanc avant « async » comme indiqué ci-dessous :

<script src="//pixel.convertize.io/1177.js"charset="UTF-8" async></script>

Charger le pixel après le chargement de la page (Exemple #3)

Il peut arriver de devoir attendre que votre page se charge intégralement avant de faire apparaître le pixel. Avec les deux exemples ci-dessus, les deux types de pixel, original ou asynchrone vont masquer le contenu de la page dès que ce dernier est activé pour lancer le scénario que vous avez créé (variation), puis vont faire apparaître le contenu une fois que la page est complètement chargée. C’est pour cela que vous pouvez choisir de charger le pixel après le chargement de la page.

Si vous avez un certain nombre de fichiers JavaScript et CSS qui se chargent sur la page, il peut y avoir un délai avant que le contenu ne s’affiche. Pour éviter ce délai, vous pouvez utiliser le pixel ci-dessous :

<script>
//<![CDATA[
(function() {
    function asyncLoad() {
        var urls = ["\/\/pixel.convertize.io\/1177.js"];
        for (var i = 0; i < urls.length; i++) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.charset='UTF-8';
            s.src = urls[i];
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
        }
    }
    window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>
</script>

Si vous voulez utiliser un de ces exemples, copiez et collez le script donné dans cet article, mais n’oubliez pas de changer le numéro « 1177 » utilisé dans les exemples. Vous devez le remplacer par votre numéro de projet personnel que vous pouvez trouver dans le code du pixel donné à chacun de vos projets.

Support des systèmes d’exploitation

Les premières versions de navigateurs reconnaissant l’attribut « async » sont Firefox 3.6, Internet Explorer 10.0 et toutes les versions de Google Chrome, Safari et Opera.