使用 javascript 在静态站点的 html 中注入 GA4 脚本答案

【问题标题】：inject GA4 script in the html of a static site with javascript使用 javascript 在静态站点的 html 中注入 GA4 脚本
【发布时间】：2022-11-02 17:30:32
【问题描述】：

我有以下情况：

一个静态网站，只有html页面
一个cookie通知系统，带有我自己的cookie，接受和拒绝cookie设置系统

现在我需要在接受 cookie 时将 GA4 脚本注入页面头部，但是......

我已经做到了，通过将脚本附加到头部并且它在浏览器上可见，在页面重新加载时使用检查元素......并且它运行完美。

当用户点击接受cookies时，cookies接受被保存在客户端，并且脚本被追加到页面。

但我需要以某种方式注入 GA4 脚本，以便在源页面上可见。就像我在浏览器中预览源页面以将其放在那里一样。我不需要将它注入到 html 文件本身中，而只需要注入到浏览器中。

这些天我做了自己的研究，现在它正在杀死我，因为我能找到的只是附加方式，但这并不是将它注入浏览器的源页面。

任何建议或指导将不胜感激。

注意（正如我一直在问的那样。我不想冒犯任何人，但这是我可以解释我想做什么和做什么的最好方式）：

我说的源页面是在浏览器上右击查看源页面（这里需要插入GA4代码）
我让它工作的方式是右键单击>检查>元素选项卡-（我现在可以工作了）

谢谢！

【问题讨论】：

目前还不清楚你要什么。我思考您正在寻找 eval() （这是不安全的，不应在生产中使用）或 const script = document.createElement("script"); script.src="link_to_script";document.appendChild(script); 。是你自己的网站吗？你试过什么？
:)) 我试图说得很清楚。我将我的 google adsense (GA4) 附加到带有 document.appendChild(script) 的页面，就像你提到的那样。当我在网页 Inspect > Elements 上执行操作时，我可以在 </head> 标记之前看到我的脚本，它应该在哪里。
但是当我在同一个页面表单浏览器上查看页面源时，我再也看不到那个 google adsesnse 脚本了。 ..这就是我想拥有它的地方..在浏览器的源页面中。那可能吗？ ... IDK 如何更好地解释..用我的道歉
script 标签最好位于body 标签的底部。是的，我不确定你的意思，所以很难帮助你。总帐。
这回答了你的问题了吗？ Run script after appending it to the HTML

标签： javascript html code-injection static-site

【解决方案1】：

第一个问题是，为什么你希望它出现在实际的源代码中？插入这些脚本的一种常见方法是通过标签管理解决方案，它基本上遵循与将脚本附加到页面类似的逻辑（即类似于您所说的检查元素路由）。

回答你的问题；有一个选项可以将其放入源代码，即通过在服务器上检查提供 HTML 的用户是否接受了 cookie，如果是这种情况，则提供 HTML 文件（或调整 HTML）以包含 GA4 脚本，如果用户不接受：交付没有 GA4 脚本的页面。

由于您提到这些是静态 HTML 文件，我假设没有可以插入这种逻辑的服务器。所以最好的选择是在之后插入脚本。

另一种方法是默认插入标签，但禁用跟踪（还没有测试以下部分，也请验证您自己在不接受 cookie 时是否真的阻止跟踪）：

window['ga-disable-GA_MEASUREMENT_ID'] = true;

https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out

您可以尝试在加载 GA4 标记之前将其添加到您的 HTML 中，类似于：

<script>
const gaMeasurementId = 'G-12345678'; //replace with your own MeasurementID   

let cookiesDeclined = true; //default to declined cookies
document.cookie.split(';').forEach( (cookie) =>{ //loop through all cookies
    const cookie_arr = cookie.split('='); //get key/value pairs for cookies
    let name = cookie_arr[0]; //cookiename
    let val = cookie_arr[1]; //cookieval

    if(name === 'cookieConsent' && val === 'accepted' ){
        cookiesDeclined = false; //set the declined status to false when user has accepted the cookies
    }
})

window['ga-disable-'+gaMeasurementId] = cookiesDeclined;

//->insert ga4 tag here
</script>

【讨论】：