Implement Identify calls with Google Tag Manager

If your website uses forms that support Google Tag Manager’s built-in Form Listener, you may be able to implement Identify calls without adding custom JavaScript to your website.

What is Google Tag Manager? Google Tag Manager is a free tag manager solution that allows you to inject JavaScript snippets and custom code into your website, without editing the HTML.

Sending Identify calls helps Clearbit identify users, track those users' actions (like page views), and record traits about them.

Clearbit_Identify_Call.png

When should I send an Identify call? Clearbit recommends that you make an Identify call whenever a user fills out a form, signs up, or updates their user information in your app.

Check the identify user guide for more examples →

How it works

Google Tag Manager has a predefined Form Submission variable that can detects and read form submission inputs on your website, assuming your forms use a standard form structure.

What if my forms don't use standard form inputs?

If your forms do not support standard form submit events, you can send Identify events via Google Tag Manager by passing an event with the form input data directly to the data layer.

In the example below, Google Tag Manager will detect the standard form inputs, trigger an event when the form is submitted, and send the Clearbit Identify call using the submitted email address.

In this example, we'll assume the below form (with a name="email" attribute/value) is present in the page HTML.

<form>
<input type="text" name="email" placeholder="Email" />
<input type="submit" />
</form>

How to set it up

1. Enable the Form Variables

Enable the Forms Variable in the Variables tab in your Google Tag Manager container. This will allow you to use the built-in variable as a trigger.

Google_Tag-Manager_step1.gif

2. Create a Form Submission trigger

In this example, the trigger tracks all form submissions, delaying the request to send before the page changes.

google_tag_manager_step2.jpg

Use the Form ID to identify the right trigger events. In this example, we use the dynamic Form ID variable to only trigger requests on forms with an id="login" attribute.

This prevents GTM from triggering on any detectable form submission, giving more granular control over the type of form tracked (and which variables are sent).

3. Create a new Custom HTML tag

Use querySelector javascript to identify, extract, and reformat the form elements into an Identify call.

<script>
 var email = {{Form Element}}.querySelector('[name="email"]').value;
 clearbit.identify(email, {
   "email": email
 });
</script>

In this example, the code tracks a form submission and creates a user profile based on the user’s email address:

Customize your HTML tag. Remember, this tag is based on the example form HTML at the top of this article. For your own forms, customize the .querySelector('[name="email"]') section to match the name of the attribute for the Email text input in your forms.

4. Add the Form Submission trigger

Select the Form Submission variable you created in the Triggers section.

google_tag_manager_step4.gif

Here is an example of the final implementation. 

Screen_Shot_2021-04-02_at_1.26.15_PM__1_.png

Does your forms support standard submissions and inputs?

Google Tag Manager’s auto-event listener detects standard submit events from the browser. There are situations where these standard submit events do not work for your website.

If your forms do not support standard form submit events, you can send Identify events via Google Tag Manager by passing an event with the form input data directly to the data layer.

Other Resources

For more detailed guides on using Google Tag Manager’s Form Submission triggers, please refer to Google’s documentation here or this helpful article from Analytics Mania or Simo Ahava.