Google Analytics: tracking account creation/registration help

[alexr_ingram]

Hi all,

Looking for some help on this! We're using Google Tag Manager to track some online engagements however I'm struggling to successfully track account registrations. I'm sure it's a simple case of adding tracking code to the below, just need to work out what code to add and where it needs to be added. Can anyone help?

<div class="page-width page-content">
<div class="grid">

<div class="grid__item medium-up--one-third medium-up--push-one-third">

<header class="section-header">
<h1 class="section-header__title">{{ 'customer.register.title' | t }}</h1>
</header>

<div class="form-vertical">
{% form 'create_customer' %}

{{ form.errors | default_errors }}

<label for="FirstName">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="FirstName" class="input-full" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>

<label for="LastName">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="LastName" class="input-full" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words">

<label for="Email">{{ 'customer.register.email' | t }}</label>
<input type="email" name="customer[email]" id="Email" class="input-full{% if form.errors contains 'email' %} error{% endif %}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">

<label for="CreatePassword">{{ 'customer.register.password' | t }}</label>
<input type="password" name="customer[password]" id="CreatePassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}">

<p>
<input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full">
</p>

{% endform %}
</div>

</div>

</div>
</div>

Thanks in advance 🙂

Alex

[stevelamar]

Hi Alex-

To track form submits using GTM, you don't need to change the code of the form, you add a trigger in GTM that will fire a GA tag based on the form submission. First, add a new Form Submission trigger to fire on Some Pages using Form ID contains create_customer

Then create a Google Analytics tag with Track Type of Event and fire this tag using the trigger you setup. If you have Recaptcha setup, you will need to add extra steps, but this should get you pushed in the right direction.

Hope that helps...

[alexr_ingram]

Hi @stevelamar  - thank you! That was very quick and easy... I think my brain had given up after a long day. 

Best,

Alex

[Josh_Uebergang]

Be careful to factor in when the form is submitted but doesn't validate or successfully submit. Otherwise, you'll send multiple events into GA.

[mdyomin]

Hi @Josh_Uebergang! Can you please advise on what's the best way to track events only on successful submit? Thanks!

[Josh_Uebergang]

I currently don't have a solution anyone can use. I believe the submission needs to be interrupted with JavaScript so that a Google Analytics event can be sent. It's not something I've created for a client yet.

[stevelamar]

The easiest way to track only on successful submits is to have the form redirect to a new page after submission. The below code can be added to your form to setup the redirect. Then in GTM, rather than using a form submission trigger, you can use a page view trigger to fire the event when that page is viewed. 

{% if form.posted_successfully? %}
<script>
window.location = "/pages/thank-you-for-contacting-us";
</script>
{% endif %}

Make sure to set the tag to only fire "Once per page"

And a noindex tag to the confirmation page so users can't get to the page from some other source. Here is how you add noindex to pages: https://help.shopify.com/en/manual/promoting-marketing/seo/hide-a-page-from-search-engines

Does that help?

[mdyomin]

Hi @stevelamar! Can you please provide more info regarding extra steps needed if you have ReCaptcha setup? Thanks!