Javascript 如何访问Aurelia中的Google Analytics数据层变量？_Javascript_Typescript_Webpack_Aurelia

Javascript 如何访问Aurelia中的Google Analytics数据层变量？

javascript typescript webpack aurelia

Javascript 如何访问Aurelia中的Google Analytics数据层变量？,javascript,typescript,webpack,aurelia,Javascript,Typescript,Webpack,Aurelia,我正在为aurelia使用带有typescript组合的网页包，想知道如何在aurelia类中推送google analytics提供的全局数据层变量当我尝试记录它时，我得到：找不到名称“数据层” 但当我在浏览器的控制台中登录时，数据层就存在了你知道我怎样才能揭露它吗 console.log(window.dataLayer); @inject(AppState, AuthService, SetupGuide, Endpoint.of('api'), DialogService, E

我正在为aurelia使用带有typescript组合的网页包，想知道如何在aurelia类中推送google analytics提供的全局数据层变量

当我尝试记录它时，我得到：找不到名称“数据层”

但当我在浏览器的控制台中登录时，数据层就存在了

你知道我怎样才能揭露它吗

console.log(window.dataLayer);

@inject(AppState, AuthService, SetupGuide, Endpoint.of('api'), 
DialogService, EventAggregator, Router)
export class Smoke {}

我知道通过webpack，您可以通过以下方式使用填隙：

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

dataLayer变量也可以这样做吗？我需要能够更新数据层变量，以便我可以设置增强的电子商务跟踪

更新：我也尝试过：

(<any>window).dataLayer = (<any>window).dataLayer || [];

尝试在网页包配置中使用

externals

属性

webpack.config.js

externals: {
  dataLayer: 'dataLayer'
}

yourSource.js

import dataLayer from 'dataLayer';

index.html

<body aurelia-app="main">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-okoko" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
       j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-ookok');
</script>


（函数（w，d，s，l，i）{w[l]=w[l]||【】；w[l]。推送（{'gtm.start'：
new Date（）.getTime（），事件：'gtm.js'}）；var f=d.getElementsByTagName[0]，
j=d.createElement，dl=l！=“数据层”？“&l=”+l:“”；j.async=true；j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl；f.parentNode.insertBefore（j，f）；
})（窗口、文档、“脚本”、“数据层”、“GTM-ookok”）；

如下调整代码。更新

main.ts

文件，使其看起来像

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  // ...
}

window.dataLayer = window.dataLayer || [];

declare global {
  interface Window {
    // TODO: replace this with a more specific type based on usage
    dataLayer: any[];
  }
}

注意：上述代码片段中特定于Aurelia的代码仅用于提供上下文。这个答案也不是特定于Webpack的，而是适用于任何使用模块的TypeScript项目

从这里开始，您只需通过引用

window.dataLayer

访问它。初始化代码和全局声明可以移动到一个单独的文件中，您可以将其封装在一个服务中，如果愿意，该服务可以充当全局声明的代理。

什么时候设置window.dataLayer？也许在你试着打电话给它之后？您不能只访问类中的窗口对象吗？@2pha我可以访问类中的窗口对象，但可以尝试（window.dataLayer=（window.dataLayer | |[]）；确实抛出了一个类型错误：“错误：无法解析‘dataLayer’”。我认为最简单的方法是使用像@StanislavMayorov这样的npm包。唯一的问题是，它不适用于google tag manager，而是适用于google analytics。你知道如何让标签管理器工作吗？@AluanHaddad我已经用一个样本进行了更新。不幸的是，这不起作用。抛出：错误TS2307:找不到模块“数据层”。@JasonBiondo GTM脚本未将自身注册为UMD、CommonJS、AMD或System.register模块，因此此方法不起作用。您的解决方案非常有效。我现在已经在全球范围内设置了它，只需调用window即可在我的整个应用程序中使用它。Datalayer我真的很高兴这对您起到了作用。你介意把它标为可接受的答案吗？我很乐意补充更多的解释。我该怎么做？我向上投票并给了你奖金。点击投票计数器下面的复选标记。但无论如何，不用担心，谢谢你。

import dataLayer from 'dataLayer';

<body aurelia-app="main">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-okoko" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
       j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-ookok');
</script>

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  // ...
}

window.dataLayer = window.dataLayer || [];

declare global {
  interface Window {
    // TODO: replace this with a more specific type based on usage
    dataLayer: any[];
  }
}