0

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

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

我有三个问题：

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

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

应用程序.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>？如何有条件地隐藏它？

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

4

2 回答 2

1

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

在此处输入图像描述

于 2021-12-04T07:50:39.357 回答
0

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

如果页面上的脚本类型不受支持或当前在浏览器中关闭脚本，则noscript HTML 元素定义要插入的 HTML 部分。

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

2-对于第二个问题，您可以使用.env文件并为不同的环境（生产、登台等）设置不同的值，并procss.env.GA_ID在nuxt.config.js文件中使用内部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'
      }
   ],
}
于 2021-07-30T14:09:43.410 回答