Question

我正在尝试安装一个声明全局函数的脚本，并在某些页面内访问它。

该脚本是Google跟踪代码管理器（GTM）的“转化跟踪代码”。它非常简单，与许多第三方脚本（用于分析或其他）非常相似。

1）标头中的脚本

<!-- Global site tag (gtag.js) - Google Ads: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-123456789">

2）初始化脚本

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-123456789');
</script>

3）页面脚本

<!-- Event snippet for Example conversion page -->
<script>
  gtag('event', 'conversion', {'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
    'value': 1.0,
    'currency': 'USD'
  });
</script>

我的尝试

1）标头中的脚本

这是有据可查且简单明了的。我已经编辑了nuxt.config.js文件：

//nuxt.config.js

module.exports = {
  head: {
    //...
    link: [
      //...
      {
        src: "https://www.googletagmanager.com/gtag/js?id=AW-123456789",
        async: true
      }
    ]
  }
}

很好，我可以在网络连接中看到请求。

2）初始化脚本

我创建了一个简单的Nuxt插件：

// plugins/gtag.js

/* eslint-disable */
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "AW-123456789");

并将其加载到浏览器中：

//nuxt.config.js

module.exports = {
  plugins: [
    //...
    { src: "@/plugins/gtag", ssr: false }
  ],
}

3）页面脚本

这是我遇到麻烦的部分。

我想从某些页面访问插件中的gtag()函数声明。

所以我正在方法内部调用脚本：

methods: {
  open() {
    gtag('event', 'conversion', {'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
      'value': 1.0,
      'currency': 'USD'
    });
  }
}

我得到了错误：

ReferenceError：未定义gtag

我想念什么？

Answer 1

您仅在插件作用域中定义了函数。

您要做的是将功能注入到Vue实例和SSR上下文（docs）：

// plugins/gtag.js

/* eslint-disable */
window.dataLayer = window.dataLayer || [];
const gtag = function() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "AW-123456789");

module.exports = ({ app }, inject) => {
  inject('gtag', gtag)
}

以这种方式使用它（请注意函数前的强制$符号）：

methods: {
  open() {
    this.$gtag('event', 'conversion', {'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
      'value': 1.0,
      'currency': 'USD'
    });
  }
}

从第三方脚本访问全局功能

我的尝试

1 个答案: