Как использовать gatsby-plugin-google-gtag с Gatsby.js?

Я только что установил gatsby-plugin-google-gtag в свой gatsby-config.js файл:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "UA-XXXXXXXXX-X", // Google Analytics / GA
          "AW-XXXXXXXXX" // Google Ads / Adwords / AW
        ],
        pluginConfig: {
          head: true        
        },
      }
    }
  ]
}

Затем я добавляю это событие в свою форму, должно ли оно работать?

class Form extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        window.gtag("conversion", "click", { send_to: ["AW-XXXXXXXXX/-XXXXXXXXXXXXXXXX"]})
    }    

    render() {
        return (
            <Div className='au'>
            <form action = "https://formspree.io/[email protected]" method = "POST">
                <InputName type = "name" name = "name" placeholder = "Your Name"/>
                <InputMail type = "email" name = "email" placeholder = "Your Mail"/>
                <Button type = "submit" onClick = {this.handleClick}>Contact us</Button>
            </form>
            </Div>
        )
    }
}

export default Form;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
5
0
2 834
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

из документов:

This plugin only works in production mode!

Также ваша конфигурация выглядит хорошо, просто убедитесь, что ваши идентификаторы отслеживания верны.

Да! Очень эффективный..!

sashaboulouds 21.07.2019 16:37

какой тупой плагин

B-Tron of the Autobots 26.03.2022 04:05

handleClick должно быть:

handleClick() {
    window.gtag("event", "conversion", { send_to: ["AW-XXXXXXXXX/-XXXXXXXXXXXXXXXX"]})
}

Формат gtag:

gtag("event", "<event_name>", {<event_params>});

Дополнительная информация о gtagздесь.

Другие вопросы по теме