web-dev-qa-db-fra.com

Erreur du gestionnaire d'étiquettes ECMASCRIPT6

J'ai déjà configuré avec succès l'interphone à l'aide de Google Tag Manager. Je n'y ai pas touché depuis quelques mois et je vais créer une nouvelle étiquette mais cette erreur provenant de la balise interphone m'est présentée:

Error at line 6, character 243: this language feature is only supported for ECMASCRIPT6 mode or better: block-scoped function declaration. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT or higher to enable ES6 features.

Mon script pour interphone n'a pas changé depuis qu'il a fonctionné à l'origine:

<script>
  window.intercomSettings = {
    app_id: "key"
  };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.Push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/key';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>

Si quelqu'un a rencontré cette erreur et a un conseil ou des astuces sur la façon de la résoudre, ce serait très apprécié.

javascriptecmascript-6google-tag-managerintercom
4
chdonncha

Avant que GTM encapsule le code dans un fichier JavaScript réduit pour l'injecter dans une page, le code passe par un linter; Le problème ici est que Google modifie parfois les règles du linter pour les rendre plus strictes (cela est apparu à quelques reprises sur le forum GTM). Etant donné que ceci n’est annoncé nulle part, des balises qui fonctionnaient auparavant ont été cassées.

Le problème ici semble être que vous devez déclarer une fonction dans un bloc if/else. Vous pouvez voir cela lorsque vous "embellissez" votre fichier:

<script>
    window.intercomSettings = {
        app_id: "key"
    };
</script>
<script>
    (function() {
        var w = window;
        var ic = w.Intercom;
        if (typeof ic === "function") {
            ic('reattach_activator');
            ic('update', intercomSettings);
        } else {
            var d = document;
            var i = function() {
                i.c(arguments)
            };
            i.q = [];
            i.c = function(args) {
                i.q.Push(args)
            };
            w.Intercom = i;

            function l() {
                var s = d.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = 'https://widget.intercom.io/widget/key';
                var x = d.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            }
            if (w.attachEvent) {
                w.attachEvent('onload', l);
            } else {
                w.addEventListener('load', l, false);
            }
        }
    })()
</script>

La fonction "l" est déclarée à l'intérieur du bloc "else" et le linter de Google ne l'aime pas (puisque les versions précédentes de Javascript n'ont techniquement pas de portée de bloc, cela n'a été introduit qu'avec ES6). 

Bien que je sois certain qu'il existe un moyen correct de résoudre ce problème, une solution simple consiste à déplacer la déclaration "l" à l'extérieur du bloc:

<script>
    (function() {
        var w = window;

        function l() {
            var s = d.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://widget.intercom.io/widget/key';
            var x = d.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
        }
        var ic = w.Intercom;
        if (typeof ic === "function") {
            ic('reattach_activator');
            ic('update', intercomSettings);
        } else {
            var d = document;
            var i = function() {
                i.c(arguments)
            };
            i.q = [];
            i.c = function(args) {
                i.q.Push(args)
            };
            w.Intercom = i;


            if (w.attachEvent) {
                w.attachEvent('onload', l);
            } else {
                w.addEventListener('load', l, false);
            }
        }
    })()
</script>

Ne semble pas que cela devrait avoir des effets secondaires et le tag fonctionne maintenant (du moins quand je l'essaie).

12
Eike Pierstorff

Voici une réponse complète à la suite de la suggestion de @ ruben-stolk. Vous devez également insérer un point-virgule à la fin de la nouvelle fonction, comme dans l'extrait de code ci-dessous. Ceci a été testé en GTM et a réussi les erreurs de lint.

<script>
  window.intercomSettings = {
    app_id: "xe395ivj"
  };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.Push(args)};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/xe395ivj';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>

4
Tony Abou-Assaleh

Ce que vous pouvez essayer de faire est de changer votre code de

function namedFunction(x) {}

à

var namedFunction = function(x){}
1
Mary Vinitha Xavier