Google Analytics 4与TypeScript的结合

Question

我想创建一个函数，仅在访问者同意时触发GA4测量。 我已经按照以下方式创建了它：

document.querySelector('.cookie').addEventListener('click', function(){

        var ga = document.createElement('script')
        ga.type = 'text/javascript'
        ga.async = true
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.googletagmanager.com/gtag/js?id=UA-XXXXXX-X'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);


        let gat = window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-XXXXXX-X');
                setCookie('cookie','1',365);
        return false;
    })

问题在于 TypeScript 报告错误：“Property 'dataLayer' does not exist on type 'Window & typeof globalThis a gtag - Expected 0 arguments, but got 2”。

我已经尝试了各种教程，并安装了@types/gtag.js，但错误仍然存在。请问我做错了什么？谢谢。

- Radim

Answer 1

这些Typescript定义应该可以使用：

        interface Window {
        dataLayer:any;
        }
       
        let dataLayer = window.dataLayer || [];
        function gtag(a:string, b:string|object){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-XXXXXX-X');

第一个类型定义将现有的window接口扩展了一个属性"dataLayer"。(这里的Windows是大写的)。简单来说，你需要向Typescript解释，window对象有一个属性dataLayer。

如果代码片段在模块内部，则可能需要使用此定义在其他模块中使用它：

declare global {
  interface Window {
    dataLayer:any;
  }
}

这里的第二个问题是函数gtag()看起来没有参数，但实际上参数是通过变量arguments捕获的。 TypeScript似乎对这种方法视而不见，因此我们需要定义参数类型。

如果您需要向GA发送不同数量的参数，还可以使用此广义类型定义，该定义接受任意数量的参数（甚至是零个参数）：

function gtag(...args: any[]):void {window.dataLayer.push(arguments);}

- Christoph Schellhaus