如何为Google API渲染的登录按钮触发Google Tag Manager事件？

正在为网站实现Google Tag Manager（GTM）自定义事件，其他按钮通过添加onclick函数即可触发事件，但Google登录按钮是通过Google API渲染的，无法直接附加事件监听器或操作其DOM元素来触发GTM事件。

渲染按钮的cshtml代码：

<div class="login-form-group">
    @{
        var clientId = Configuration.GetSection("Authentication:Google:ClientId").Value;
        <script src="https://accounts.google.com/gsi/client" async defer></script>
        <div id="g_id_onload" data-client_id=@clientId data-callback="googleCallbackHandler"
            data-auto_prompt="false" data-ux-mode="redirect" data-use_fedcm_for_prompt="false">
        </div>
        <div class="g_id_signin" data-type="standard" data-size="large" data-theme="filled_blue" 
            data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left"
            data-locale="en" type="submit">
        </div>
    }
</div>

尝试的JavaScript代码：

const googleButton = document.getElementsByClassName("login-form-group")[0];
if(googleButton) {
    console.log("googleButton exists")
    googleButton.addEventListener("click", () => {
        console.log("googleButton was clicked")
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'googleButtonClick'
        });
        console.log("googleButtonClick event sent");
    })
}

上述代码中第一个console日志可执行，但后续日志无输出，尝试给父div设独立ID绑定事件、绑定到Google渲染的子元素均无效。

方法1：事件委托监听按钮点击 #

由于Google登录按钮是动态生成的，直接绑定事件会失效，可通过事件委托将监听绑定到已存在的父元素（或document），判断点击目标是否属于Google登录按钮的DOM结构：

document.addEventListener('click', function(e) {
    // 检查点击目标是否是Google登录按钮或其子元素
    if (e.target.closest('.g_id_signin, .g_id_signin *')) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'googleButtonClick'
        });
        console.log("googleButtonClick event sent");
    }
});

closest()方法会向上遍历DOM树，匹配最近的目标元素，确保点击按钮内任意区域都能触发事件。

方法2：利用Google登录回调（登录完成触发） #

如果需要在用户完成登录后触发事件，可直接在已配置的googleCallbackHandler函数中添加GTM事件推送：

function googleCallbackHandler(response) {
    // 原有登录逻辑代码
    // ...
    // 推送GTM事件
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'googleLoginCompleted',
        'googleResponse': response // 可携带登录响应数据用于分析
    });
}

注意：此方法触发时机为登录完成后，而非按钮点击时，需根据需求选择。

方法3：监听DOM变化绑定事件 #

通过MutationObserver监听父元素的DOM变化，当Google按钮渲染完成后直接绑定点击事件：

const loginGroup = document.querySelector('.login-form-group');
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            const googleBtn = loginGroup.querySelector('.g_id_signin button');
            if (googleBtn) {
                googleBtn.addEventListener('click', function() {
                    window.dataLayer = window.dataLayer || [];
                    window.dataLayer.push({
                        'event': 'googleButtonClick'
                    });
                    console.log("googleButtonClick event sent");
                });
                observer.disconnect(); // 监听一次后断开，避免重复绑定
            }
        }
    });
});

// 开始监听父元素的子节点变化
observer.observe(loginGroup, { childList: true, subtree: true });

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