矿工想要, 请实现 如果你感兴趣

反应 Google 标签管理器 Hook

方便使用 Google 标签管理器

有了这个自定义的钩子,您可以轻松地使用0配置的 Google 标签管理器,只需要通过 容器标识来啊!

特征

• 安装
• 如何使用
• API 密码
• 示例
• 许可证

安装

$ yarn add @elgorditosalsero/react-gtm-hook
# or
$ npm install @elgorditosalsero/react-gtm-hook

如何使用

注意一点

从v2.0起 我利用上下文在全球分享GTM为"虎克"的配置. 如果你正在寻找 1.x医生,检查 这个

基础

import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const gtmParams = { id: 'GTM-ID' }

  return (
    <GTMProvider state={gtmParams}>
      <p>My awesome app</p>
    </GTMProvider>
  )
}

带有自定义的 DataLayer 名称

import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const gtmParams = {
    id: 'GTM-ID',
    dataLayerName: 'customDataLayerName'
  }

  return (
    <GTMProvider state={gtmParams}>
      <p>My awesome app</p>
    </GTMProvider>
  )
}

带有自定义 DataLayer 名称和初始值

import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const gtmParams = {
    id: 'GTM-ID',
    dataLayer: {
      'my-custom-value': 'value',
      'my-awesome-value': 'awesome'
    },
    dataLayerName: 'customDataLayerName'
  }

  return (
    <GTMProvider state={gtmParams}>
      <p>My awesome app</p>
    </GTMProvider>
  )
}

使用 GTM 自定义环境

import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const gtmParams = {
    id: 'GTM-ID',
    environment: {
      gtm_auth: 'my-auth-token',
      gtm_preview: 'preview-id'
    }
  }

  return (
    <GTMProvider state={gtmParams}>
      <p>My awesome app</p>
    </GTMProvider>
  )
}

寻找 gtm_auth 财务报告和审定财务报表 gtm_preview 您自定义 GTM 环境的值, 请转到 Admin > 您的容器 > 环境 > 您的环境 > 动作 > 在您的 Google 标签管理器控制台中获取片段 。 您可以在片段中找到您需要的值 .

向 GTM 发送数据

import { GTMProvider, useGTMDispatch } from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const gtmParams = {
    id: 'GTM-ID',
    dataLayerName: 'customDataLayerName'
  }

  return (
    <GTMProvider state={gtmParams}>
      <div>
        <p>My awesome app</p>
        <MyAwesomeComp />
      </div>
    </GTMProvider>
  )
}

const MyAwesomeComp = () => {
  const sendDataToGTM = useGTMDispatch()

  const handleClick = () => sendDataToGTM({ event: 'awesomeButtonClicked', value: 'imAwesome' })

  return (
    <div>
      <p>My Awesome Comp</p>
      <button onClick={handleClick}>My Awesome Button</button>
    </div>
  )
}

API 密码

useGTM 提供干净易用 API 配置 GTM

输入

已发送DataTOGTM

示例

你可以看到这个自由的活在奉献上 站点

许可证

react-gtm-hook 根据麻省理工学院的许可

贡献者

感谢这些伟大的人emoji 密钥:

圭多·波尔卡罗 💻 📖	本亚普 💻 📖 ⚠️	克里斯蒂安·利韦拉 💻	杰森・芬奇 💻	意大利语Name 💻	吉安卢卡·拉·曼纳 📖	和树 💻
斯捷潘·曼德利卡 💻	西蒙·史密斯 📖	利斯蒂亚尼 💻 📖	缓冲器 💻 📖	罪恶 💻

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!