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

Posted 2023-03-07

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

【英文标题】：Add to Nuxt.js application analytics script, which execution depends on current url

【发布时间】：2021-10-05 07:51:16

【问题描述】：

我有 Nuxt.js 应用程序，它使用“通用”模式。

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

我有三个问题：

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

我尝试使用 app.html 来包含我的脚本。 以下解决方案解决了前两个问题，但最后一个问题仍然存在：如何知道当前网址？ 我无法从 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;"  />
  </div>
</noscript>
<!-- /Yandex.Metrika counter -->
%  %

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

我也考虑过将 alalytics 脚本放入插件中，但是这个解决方案有一个附带问题 - 分析不能很好地工作。

【参考方案1】：

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

noscript HTML 元素将 HTML 的一部分定义为 如果页面上的脚本类型不受支持或脚本编写，则插入 当前在浏览器中处于关闭状态。

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

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

.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'
      
   ],

【参考方案2】：

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