Search through more than a hundred articles on every aspect of User.com

Maciej Rzadkowski
Written by Maciej Rzadkowski

Scanning website forms with GTM and User.com

The best way for extracting data from your website form


Why use GTM for form data extraction?

In some cases, our data collector might not be the perfect match for extracting data from your website forms. When exactly? Let's say for example that you have multiple drop-down menus with tens of positions each. Depending on your website architecture, the data collector might extract only the ID of the element of the drop-down menu and not its visible value. So, instead of "France", you might get "425175", which is not helpful. In such situations, you might need Google Tag Manager.

Option one: Data Layer

Here is what happens in this scenario:

  1. The user arrives at your website.
  2. The user fills out the form and clicks submit.
  3. Data from the form fields are sent to User.com inside the User.com event.
  4. Data from the form fields are sent to user attributes using the pageHit method.

Step 1. Capture user data

The first step is to create a custom HTML tag that will include the edited code found in the link below. Instructions for customizing the code can be found below.

Select "Page Loaded set" for the page on which the form is located.

Here is the link to the code template:

link

Basically this code says: "Take the form on this page that has the given css selector; when it's submitted, extract the values from the given fields and send them inside an event. Then also send them to user inside "User attributes". Once this is done, trigger a GTM event named "formSubmission" with additional attributes "formType" with the value equal to "contact us" and "formPosition" "Footer".

Here is what you must adjust in this code:

  1. Put the right css selector of the form where "<CSS SELECTOR OF THE FORM HERE>" is.
  2. Now, for each field in the form, you need to provide one line starting with "var". Depending on the type field, you will need to use the right template (text, dropdown,checkbox, radiobutton). Of course, you need to put the right css selector inside the line.
  3. If you have a radiobutton, instead of the css selector, simply paste its Name attribute in the box <YOUR NAME VALUE OF YOUR RADIO INPUT>.
  4. Thirdly, choose the right name for your event.
  5. Choose the attribute names and match them with fields from the form in the "pageHit" method.
  6. The last and optional part is to trigger a "dataLayer" event for when the user submits the form. You have to adjust its "dataLayer.push attributes". You may have several forms on the same page. It's a good idea to differentiate between them. The whole thing would work with a single attribute "event", but the other ones let you make sure that everything is clear.

Let's take an example available here: http://mac.test-instance-user.com/?page_id=6

The form has the css selector equal to: .wpcf7-form

We have 4 input fields:

  • first name (css selector of the field: #contact_name), type: text
  • email (css selector of the field: #contact_email), type: text
  • genre (css selector of the field: #contact_genere), type: dropdown
  • agreement (css selector of the field: #contact_dusza > span > input[type=checkbox]) type: checkbox

Your code will look somewhat like this:

<script>
  console.log("1r");

  var signup = document.querySelector(".wpcf7-form");
  signup.addEventListener('submit', function (e) {
    
    var emailadress = signup.querySelector('#contact_email').value;
    var name = signup.querySelector('#contact_name').value;
    var mgenre = signup.querySelector('#contact_genere').options[form.querySelector('#contact_genere').selectedIndex].text;
    var agreement = signup.querySelector('#contact_dusza > span > input[type=checkbox]').checked;

    var signup_data = {
      email: emailadress,
      first_name: name,
      genre: mgenre,
      privacy_agreement: agreement,
    };

    console.log("2r");
    
    userengage('event.cinema_anquette', signup_data);
        
    UE.pageHit(signup_data);


console.log("3r");
 
 dataLayer.push(signup_data);
 dataLayer.push({
 'event': 'Cinema Anquette Filled',
 'formType': 'Anquette',
 'formPosition': 'Full Page'
   
 });
    console.log("4r");
});
</script>

You can add console logs to check where you could have made mistakes while setting up selectors.

Final note

Remember that if you do not wish to send data to "User attributes" or as an event, you will have to comment '//' or delete this element of the code.

Categories: