How can I manually add Automatic Advanced Matching to my form for Facebook's Pixel in a React site?

Question

I have a form in my landing page written in React and I need the form inputs to be sent or somehow registered with the 'fbq' (Facebook Pixel) for the site.
The form takes the name, email, and phone number.

I would turn on 'Automatic Advanced Matching', but Facebook says I need to do it manually.

From Facebook's website I need to do something like this...

fbq('init', '{facebook-pixel-id}', {
  em: '{user-email}',         // Values will be hashed
  fn: '{user-first-name}',    // automatically by the pixel
  ln: '{user-last-name}'      // using SHA-256
  ...
});

But I will need to use something like {e => window.fbq('init', '{facebook-pixel-id}', { em: '{user-email}')}... etc because I am in React.
I'm not sure if I should, or can store the form inputs into a list or at what point the form data will register into the above 'fbq'.
Should all of this be tied into the submit button "on click"?

Here is the entire form component I would like to add this to. My guess as a solution is below it.

import React from 'react';

export default class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.submitForm = this.submitForm.bind(this);
    this.state = {
      status: ""
    };
}

  renderForm() {
    return (
      <form
        className="all-form"
        onSubmit={this.submitForm}
        action="https://script.google.com/macros/s/0000000000000000000000000-exec"
        method="POST"
      >

        <div className='form-left'>
        <div className="row_10">
          <div className="col-25">
          </div>
          <div className="col-75">
            <input className="sm-cell" type="text" id="name" name="Name" placeholder="Name"/>
          </div>
        </div>
        <div className="row_10">
          <div className="col-25">
          </div>
          <div className="col-75">
            <input className="sm-cell" type="text" id="Phone" name="Phone" placeholder="Phone"/>
          </div>
        </div>
        <div className="row_10">
          <div className="col-25">
          </div>
          <div className="col-75">
            <input className="sm-cell" type="text" id="Email" name="Email" placeholder="Email"/>
          </div>
        </div>
        <div className="row_10">
          <div className="col-25">
          </div>
        </div>
        <div className="row_10">
          <div className="col-25">
          </div>
          </div>
          </div>

        <div>
          <div className="col-25">
            <a href="/#"><input className="subm_button" onClick={e => window.fbq('track', 'Contact')} type="submit" value="Submit"/></a>
          </div>
        </div>
      </form>
    );
  }
  
  render() {
    const { status } = this.state;
    const submitted = status === "SUCCESS";
    return (
      <>
        {!submitted && this.renderForm()}
        {submitted  && <h3 className="thank-outro"> <h1>Thank you!</h1> <br/> I will talk to you soon! <br/>
        Please Call at 555-555-5555
        <br/>
        if you would like to speak to Joe this instant.
        </h3>}
        {status === "ERROR" && <h3 className="thank-outro">Oops! There was an error.</h3>}
      </>
    );
  }

  submitForm(ev) {
    ev.preventDefault();
    const form = ev.target;
    const data = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        form.reset();
        this.setState({ status: "SUCCESS" });
      } else {
        this.setState({ status: "ERROR" });
      }
    };
    xhr.send(data);
  }
}

My guess is to put everything into the onClick of the Submit button...

<div className="col-25">
  <a href="/#"><input className="subm_button" onClick={e => window.fbq('track', 'Contact'); e => window.fbq('init', '{facebook-pixel-id}', {  
  em: {Email},  
  ph: {Phone},  
// I would like to split the name in the name field to first and last by the space
  fn: {Name.split(' ')[0]},  
  ln: {Name.split(' ')[1]}  

});)} type="submit" value="Submit"/></a>
</div>

Are 'Email' and 'Phone' stored as variables I can use? Also, not sure how to know with Facebook if this is even working if I get it right.

If all this is too much of a tall order a clue for what and how to console log what gets submitted to the XML and to Facebook's 'fbq' would be much appreciated.

Thank you!

Answer 1

looks like you are trying to fire the FB tag from the JS/react code, this is not the best way - although it is possible. Correct set up would be (since you are using react) to base tracking on events. So, when user submitted the form on successful callback you should push data to dataLayer containing the submitted params and event. After that use Google tag manager to fire facebook pixel and fill in the fb params there. By using it this way, is much easier to manage firing the FB pixel. Here you can find more about dataLayer and tracking events: https://floyk.com/en/post/set-up-event-tracking-using-js-and-datalayer

and here is more info about Facebook advanced matching https://floyk.com/en/post/setup-facebook-advanced-matching-for-websites