我如何在Chrome扩展程序中插入Google跟踪代码管理器以弹出窗口?

时间:2019-03-27 16:38:24

标签: angular google-chrome-extension google-tag-manager

我创建了chrome扩展程序。我在弹出式HTML中添加了Google跟踪代码管理器脚本并且没有脚本iframe:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Signals</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<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-XXXXXXX');
console.log(dataLayer);
</script>
<!-- End Google Tag Manager -->

</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  <ch-signals maxLines="7" lang="en" symbols="rub,usd,eur"></ch-signals>


<script type="text/javascript" src="ch_signal-f9eaa1a4.js"></script></body>
</html>

一切正常,但GTM无法正常工作,我在控制台中添加console.log(dataLayer),我看到了dataLayer数组。怎么了?

1 个答案:

答案 0 :(得分:0)

我找到了答案。在扩展程序中,所有内容均正确无误,在Google跟踪代码管理器(GTM)中,必须禁用协议检查。我在要设置的GTM字段中将checkProtocolTask设置为false,将path设置为{{PagePath}},并且它现在可以正常工作!