前端之家

  1. 首页
  2. 问答

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

• 问答

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

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

我有三个问题：

  1. 应该在每个页面上使用脚本
  2. 脚本只能在生产环境中使用
  3. 脚本应仅用于特定域，例如：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> 呢？如何有条件地隐藏它？

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

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

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'
      }
   ],}
google-analyticsnode.jsnuxt.jsyandex-metrika
本文链接：https://www.f2er.com/14674.html

大家都在问