web-dev-qa-db-ja.com

インターコムECMASCRIPT6タグマネージャーエラー

以前、Googleタグマネージャーを使用してインターコムを正常にセットアップしました。数か月間触れていないので、新しいタグを作成しますが、インターコムタグからのこのエラーが表示されます。

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.

インターコムのスクリプトは、最初に機能してから変更されていません。

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

誰かがこのエラーに遭遇し、それを解決する方法についてのアドバイスやヒントがあれば、それは大いにありがたいです。

javascriptecmascript-6google-tag-managerintercom
4
chdonncha

GTMがコードを最小化されたJavaScriptファイルにラップしてページに挿入する前に、コードはリンターを通過します。ここでの問題は、Googleがリンターのルールを変更して、より厳密にすることがあることです（これは、GTMフォーラムで数回ポップアップしています）。これはどこにも発表されていないため、以前に機能していたタグが壊れることがあります。

ここでの問題は、if/elseブロック内で関数をタグ宣言することであるようです。ファイルを「美化」すると、次のことがわかります。

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

「l」関数は「else」ブロック内で宣言されており、Googleのリンターはそれを好みません（以前のバージョンのJavascriptには技術的に関数のブロックスコープがないため、これはES6でのみ導入されました）。

これを修正する正しい方法があると確信していますが、簡単な方法は、「l」の宣言をブロックの外に移動することです。

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

副作用があるはずではなく、タグが機能するようになりました（少なくとも試してみると）。

14
Eike Pierstorff

@ ruben-stolkからの提案に続く完全な答えはここにあります。また、以下のスニペットのように、新しい関数の最後にセミコロンを挿入する必要があります。これはGTMでテストされ、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

あなたができることはあなたのコードをから変更することです

function namedFunction(x) {}

に

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