添加到 Nuxt.js 应用程序分析脚本，其执行取决于当前 url

Question

我有 Nuxt.js 应用程序正在使用 'universal' 模式。

我的任务是将 Yandex-metrika（类似于 Google 分析）插入我的 Nuxt.js 应用程序。

我遇到三个问题：

每个页面都应该使用脚本
脚本只能在生产环境中使用
脚本只能在特定域上使用，例如：domain.com

我尝试使用 app.html 来包含我的脚本。前两个问题已通过以下解决方案解决，但最后一个问题仍然存在：如何知道当前 url？我无法从 Nuxt.js 模板语法访问 window，window.location.host 可以轻松解决我的问题。

app.html

{% if (process.env.NODE_ENV === 'production') { %}
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
  // script execution
</script>

<noscript>
  <div>
    <img src="https://mc.yandex.ru/watch/00000000" style="position:absolute; left:-9999px;" alt="" />
  </div>
</noscript>
<!-- /Yandex.Metrika counter -->
{% } %}

我可以在 <script> 中添加条件语句，例如 if (window.location.host === 'domain.com') 但是 <noscript> 怎么办呢？如何有条件地隐藏它？

我也考虑过将分析脚本放入插件中，但这个解决方案有附带问题 - 分析效果不佳。

Answer 1

3- 您不必担心 noscript 标签，它只是在您的浏览器上禁用 javascript 时的备用方法。

The noscript HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

1- 正如您针对此问题所说，您可以使用不同的方法，例如 plugins、app.html（使用 window.location.host 并检查正确的域）等

2- 对于第二个问题，你可以使用 .env 文件并为不同的环境（生产、暂存等）设置不同的值，并在 nuxt.config.js 中使用 procss.env.GA_ID ] 文件，里面 head 属性你可以有条件地加载脚本。

.env 文件

GA_ID=UA-17XXXX23-X

// example with analytics
// nuxt.config.js
// inside export default
head: {
   script: [
      {
         src: 'https://www.googletagmanager.com/gtag/js?id=' + process.env.GA_ID
      },
      {
         src: '/gtm.js'
      }
   ],
}

Answer 2

选中选项仅从特定地址接收数据以防止从不需要的域向您的报告发送无关数据。

添加到 Nuxt.js 应用程序分析脚本，其执行取决于当前 url

Add to Nuxt.js application analytics script, which execution depends on current url

google-analytics

node.js

yandex-metrika

nuxt.js