Cách Dễ Nhất để Quản Lý Google Tag Manager với React Hooks

ĐANG TÌM NGƯỜI DUỮNG, VUI LÒNG LIÊN HỆ NẾU BẠN CÓ HỨNG THÚ

Hook React Google Tag Manager

Sử dụng Google Tag Manager một cách dễ dàng

Với hook tùy chỉnh này, bạn có thể dễ dàng sử dụng Google Tag Manager với 0 cấu hình, bạn chỉ cần truyền ID của container!

Cài đặt

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

Cách sử dụng

Chú ý

Kể từ phiên bản 2.0, tôi đang sử dụng ngữ cảnh để chia sẻ cấu hình của GTM cho Hook toàn cục. Nếu bạn đang tìm kiếm tài liệu phiên bản 1.x, hãy kiểm tra this

Cơ bản

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

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

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

Với Tên DataLayer Tùy Chỉnh

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>
  )
}

Với Tên DataLayer Tùy Chỉnh và Giá trị ban đầu

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>
  )
}

Sử dụng môi trường tùy chỉnh 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>
  )
}

Để tìm các giá trị_gtm_auth_ và_gtm_preview_ cho môi trường GTM tùy chỉnh của bạn, đi tới Admin > Container của bạn > Môi trường > Môi trường của bạn > Thao tác > Lấy đoạn mã trong bảng điều khiển Google Tag Manager của bạn. Bạn sẽ tìm thấy các giá trị mà bạn cần nhúng trong đoạn mã.

Gửi dữ liệu đến 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 cung cấp cho bạn một API sạch và dễ sử dụng để cấu hình GTM

Khởi tạo

SentDataToGTM

Ví dụ

Bạn có thể thấy thư viện này hoạt động trực tiếp trên site đã dành riêng cho nó

Giấy phép

react-gtm-hook sử dụng Giấy phép MIT

Những người đóng góp ✨

Cảm ơn những người tuyệt vời này (emoji key):

Dự án này tuân theo chuẩn all-contributors. Mọi sự đóng góp đều được hoan nghênh!

Chi tiết tải về:

Tác giả: elgorditosalsero
Nguồn: https://github.com/elgorditosalsero/react-gtm-hook

Giấy phép: MIT license