🆖

(constがエラー原因)gtmカスタムhtmlタグはconstをサポートしていない

2023/07/31に公開

概要


google tag managerのカスタムタグはconstなどES6を対応していないことで大変困ったので備忘録として残す。

経緯


仕事の中でconstを用いた以下のようなコードを書いて、gtmでheadに挿入したい場面があった。

<script src="https://example.com/hoge-script.js"></script>
<script>
const a = 'hoge';
hogeHoge(a);
</script>

だがこれで公開しようとした際に以下エラーが出て、公開できませんでした。

This language feature is only supported for ECMASCRIPT_2015 mode or better 

調べてみたところ,gtmのカスタムhtmlタグはES6を対応してなく、constが用いることができないとのことでした。
「constが使えない....!?」と、普段varを使うことがアンチパターンと脳内で自動変換していた自分には盲点すぎる落とし穴でめっちゃ困りました。
何とかconstを用いれないかどうか調査してみた結果を記録します。

this language feature is only supported for ECMASCRIPT6 mode or better 【Google Tag Manager】

調査


gtmでES6を用いれないかと探してみると以下にてconstが使えると書いてあるやないか。
https://www.google.com/search?q=google+tag+manager+サンドボックス化&rlz=1C5CHFA_enJP958JP959&oq=google+tag+manager+サンドボックス化&aqs=chrome..69i57j0i546l5j69i60l2.28239j0j1&sourceid=chrome&ie=UTF-8

どうやらタグテンプレートにて保存する場合ではconstなどのコードが使用できるらしい。
これでできるのでは...?と色々やってみたのだが、どうやらscriptタグを許容しておらず、外部jsを呼び出せず、そのjsファイルの関数を使用することができなかったです...

その後も、外部jsファイルだけカスタムhtmlタグにして、constの部分はタグテンプレートなどで定義などしてみても結果同じタグの中で関数を呼び出すことはできないですし、scriptタグで囲むことができないのでうまくいかず...
書き換えられる危険性はありますがvarを使うことが一番管理がしやすく、現状のgtm運用では最善という結論になりました。

結論


結論、現状のgoogle tag managerでは、
ES6の機能を用いて、かつ外部jsファイルを使用することはできずconstなどの代わりにvarを用いる必要がありました。

constを許容しないのは現在のjsではかなり痛手だと思うのでいつかES6対応すると思うのですが...

参考文献


this language feature is only supported for ECMASCRIPT6 mode or better 【Google Tag Manager】

https://www.google.com/search?q=google+tag+manager+サンドボックス化&rlz=1C5CHFA_enJP958JP959&oq=google+tag+manager+サンドボックス化&aqs=chrome..69i57j0i546l5j69i60l2.28239j0j1&sourceid=chrome&ie=UTF-8

Discussion