CODEWITHSUNDEEP
reactjsgoogle-tag-managergoogle-ads-apigatsby
sashaboulouds
sashaboulouds

Reputation: 1854

How use gatsby-plugin-google-gtag with Gatsby.js?

I just installed the gatsby-plugin-google-gtag in my gatsby-config.js file: 

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        
        },
      }
    }
  ]
}

I then add this event on my form, is it supposed to work?

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;

Upvotes: 5

Views: 4390

Answers (2)

jarrad_obrien
jarrad_obrien

Reputation: 446

handleClick should be:

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

The gtag format is:

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

Extra information on gtag here.

Upvotes: 0

Joey
Joey

Reputation: 1155

from the docs:

This plugin only works in production mode!

Also your config looks good, just make sure your trackingIds are correct

Upvotes: 7

Related Questions