解决GTM报错：块级作用域函数声明仅支持ECMASCRIPT_2015+

报错原因 #

Google Tag Manager默认采用ES5兼容模式运行代码，你在if/else代码块内直接声明函数（比如function appendHtmlVB()）属于ES6及以上支持的块级作用域函数特性，ES5不支持该语法，因此触发报错。

修改方案 #

基础兼容版（直接适配ES5）

将块内的函数声明改为函数表达式，同时调整styles变量的位置（放到函数定义之前，避免变量提升导致的undefined问题）：

var element = document.getElementById('chamaBannerVB')
var elementZC = document.getElementById('chamaBannerZC')

if (element !== null) {
    var styles = "@media (min-width: 768px) {" + ".bannerEbookVB {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_vb_LS_03-2023.png); max-width: 800px!important;" +"}}"
    
    var appendHtmlVB = function() {
        var divVB = document.getElementById("chamaBannerVB");
        divVB.innerHTML += '<a href="https://vidabalanceada.com.br/facaparte?mktcode=IDSTCS" target="_blank"><img class="bannerEbookVB" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_vb_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
        var styleSheet = document.createElement("style")
        styleSheet.innerText = styles
        document.querySelector(".bannerEbookVB").appendChild(styleSheet);
    }       
    window.onload = appendHtmlVB;
} else {
    var styles = "@media (min-width: 768px) {" + ".bannerEbook {" + "content: url(https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_zc_LS_03-2023.png); max-width: 800px!important;" +"}}"
    
    var appendHtml = function() {
        var div = document.getElementById("chamaBannerZC");
        div.innerHTML += '<a href="https://zenconecta.com.br/facaparte?mktcode=IZSTCS" target="_blank"><img class="bannerEbook" src="https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_zc_LS_03-2023.png" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
        var styleSheet = document.createElement("style")
        styleSheet.innerText = styles
        document.querySelector(".bannerEbook").appendChild(styleSheet);
    }       
    window.onload = appendHtml;
}

优化版（减少冗余代码，更易维护）

抽离通用逻辑为独立函数，避免重复代码：

var element = document.getElementById('chamaBannerVB')
var elementZC = document.getElementById('chamaBannerZC')

// 通用Banner渲染函数
function renderBanner(containerId, bannerLink, mobileImgUrl, desktopImgUrl, bannerClass) {
    var div = document.getElementById(containerId);
    div.innerHTML += '<a href="' + bannerLink + '" target="_blank"><img class="' + bannerClass + '" src="' + mobileImgUrl + '" alt="Banner Mobile" style="width: 100%; max-width: 480px;"></a>';
    
    var styles = "@media (min-width: 768px) {" + "." + bannerClass + " {" + "content: url(" + desktopImgUrl + "); max-width: 800px!important;" +"}}";
    var styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.querySelector("." + bannerClass).appendChild(styleSheet);
}

if (element !== null) {
    window.onload = function() {
        renderBanner(
            "chamaBannerVB",
            "https://vidabalanceada.com.br/facaparte?mktcode=IDSTCS",
            "https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_vb_LS_03-2023.png",
            "https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_vb_LS_03-2023.png",
            "bannerEbookVB"
        );
    };
} else {
    window.onload = function() {
        renderBanner(
            "chamaBannerZC",
            "https://zenconecta.com.br/facaparte?mktcode=IZSTCS",
            "https://img.selecoesbrasil.com.br/banner_ebook/mobile_banner_ebook_zc_LS_03-2023.png",
            "https://img.selecoesbrasil.com.br/banner_ebook/banner_ebook_zc_LS_03-2023.png",
            "bannerEbook"
        );
    };
}

关键修改点 #

• 用var 函数名 = function() {}的函数表达式替代块内直接声明函数的写法，完全兼容ES5语法
• 将styles变量移到函数定义之前，解决ES5变量提升导致的函数内styles未定义问题
• 优化版通过抽离通用函数，减少重复代码，后续修改Banner参数只需调整传入值即可

内容的提问来源于stack exchange，提问作者Awa