如何从Jade文件中使用Google Analytics

Question

我希望追踪我的网站用户。由于我没有传统的HTML文件，我应该将给定的代码适应jade语法还是可以保持不变并以某种方式包含它?

如果需要将其转换为jade语法，是否可以通过某些工具自动生成。

<script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'domain.com');
  ga('send', 'pageview');
</script>

- NSMutableString

---

嘿，我添加了一种不同的方法来完成这个。希望能对你有所帮助。 - BRogers

Answer 1

与其让它去查找并加载另一个代码文件，直接将其嵌入代码中（就像Trevor建议的那样）更好。

为了实现这一点，您需要使用script标签...不仅仅是script

请参见下文：

script.
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-11111111-1', 'yourdomain.com');
            ga('send', 'pageview');

确保间距等与您的内容之间实际上缩进一个制表符

- BRogers

---

对我不起作用，Google标签助手显示“分析代码可用”，但未执行。“未检测到HTTP响应”。 - Darpan

确保您的间距一致。 - BRogers

Answer 2

解决方案很简单。

步骤1：我创建了一个名为“analytics.js”的文件，并将代码放在其中的脚本标签之间。不需要转换为jade语法。

步骤2：我从jade文件中引用了该脚本。

script(src='/js/analytics.js')

- NSMutableString

---

这不是一个很好的解决方案。现在你必须通过网络发送一个文件来进行分析。直接嵌入会更好。 - Trevor

同意，内联比调用整个单独的文件更好。 - BRogers

另一方面，如果Google分析脚本发生变化，更新起来会更加容易和可靠。 - user949300

这对我很好用。我不认为始终将其内联化是一个好的解决方案，尽管我只在一个非常小的站点上使用它。 - JGallardo

如果您正在内联主视图页面，那么您就可以放心了，只需要更改一个地方即可。;-) - BRogers

Answer 3

如之前所说 - 在文件内联中放置GA代码片段是推荐的，因为GA代码片段会实际调用另一个文件（www.google-analytics.com/analytics.js），所以获取另一个js文件再获取谷歌文件有点浪费。

然而 - 如果您想保持layout.jade的整洁（而且应该这样做），可以将BRogers编写的代码片段（以“script。”开头）放在单独的文件googleAnalytics.jade中，并在layout.jade中只包含：

include partials/googleAnalytics

< p >（当然，partials是我用来存放视图的方式，这取决于你）

< p >这意味着GA片段将包含在服务器上的页面中，节省了额外的GET请求，但仍保持您的layout.jade整洁美观。

- AvnerSo

Answer 4

2019年GTag更新

传统的GA脚本被这个新的GTag脚本所取代。

script(async='', src='https://www.googletagmanager.com/gtag/js?id=UA-11111111-1')
script.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-11111111-1');

- PirateApp

Answer 5

现在它是 Pug。尽管如此，您仍可以将包含所有 Google Analytics 代码的 .html 文件包含在其中。

include includes/google_analytics.html

- Oleg Frolov

Answer 6

如果您仍然希望以内联方式添加它，这里是要点，我使用4个空格进行缩进。您可以像这样调用它+ga('yourid12345') 此外，这里有一个pug谷歌分析mixin，将输出与您在HTML5样板中找到的相同脚本。

- antlis