Enter the Share Your Success Sweepstakes 2024 For the Chance to Win Great Prizes!

How to track successful sign-up forms with Google Analytics

SOLVED
Go to solution
OliviaB201
Rookie
0 Votes

Hi everyone,

 

I have installed Constant Contact Signup form in my ecommerce webpage (Shopify).

How could I track the number of people who sign up, in order to use the event as a goal in the Google Analytics of the webpage?

 

Thank you very much in advance.

1 ACCEPTED SOLUTION
UtahD
Marketing Legend

If you view source on a CC signup form, notice that the top-most parent div has a class of ctct-inline-form and then a unique data-form-id (unique to your form and made up from lots of random characters).

 

Notice, too, that there is a hidden success message div with class ctct-form-success. When that success message div becomes visible, then Google Tag Manager (GTM) should be able to track it. Because my site has multiple signup forms, I want to know which form was submitted by its unique ID. My GTM Tag has 3 parts.

 

1. A custom JavaScript variable that looks for the top-most parent div and then grabs the unique ID. The javascript is:

function() {
return {{Click Element}}.closest(".ctct-inline-form").getAttribute('data-form-id');
}


2. An Element Visibility Trigger that watches for the success message div to appear. The setup follows.

  • Selection Method: CSS Selector
  • Element Selector: .ctct-form-success
  • When to fire this trigger: Once per element
  • Minimum Percent Visible: 1 percent
  • Observe DOM changes: checked (I need the trigger to watch for the div to become visible)
  • This trigger fires on: All Visibility Events (I’d like to narrow this down, but don’t know how at the moment)

3. GA4 Event Tag. Setup follows.

  • Event Name: call_to_action (this is a made-up event name. You can call your event whatever you like).
  • Event Parameters:
    • Parameter Name: form_id (this is a made-up parameter. You will need to register it in GA4 as a custom dimension to use it in reports)
    • Value: {{the name of the var created in Step 1}}

Note: in Step 1, I don’t know why {{Click Element}} works since the user didn’t click the success message to make it show. Maybe that doesn’t matter to the GTM DOM trigger.


How does this work?

If a user subscribes to your Constant Contact form, then the “success” div will appear. The trigger will see that because it is watching for DOM changes. It will trigger the tag. The tag will use the variable from Step 1 to lookup the unique ID of the form that was submitted. The tag will send the custom call_to_action event to GA4 and pass the parameter “form_id”.

 

P.S. I have lots of signup forms, so I’ll probably use some kind of lookup table in my data report to convert the unique IDs to something more meaningful like “My Signup Form of Destiny”. I’m not using a lookup table in GTM because I am not the only content contributor so I won’t know when new forms are added. (shrug)

View solution in original post

5 REPLIES 5
William_A
Administrator
0 Votes

Hello @OliviaB201 ,

 

The apps are built to provide analytics to us so we can present them to you, but after speaking with our higher level technical team it isn't possible to link Google Analytics. I did make sure to track your feedback for them, for any potential developments in the future, but at this time GA isn't compatible with these sign up forms or extensions.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
William A
Community & Social Media Support
OliviaB201
Rookie
0 Votes

Hi William,

 

In this post, it seems that there is a user who has managed to link the signup form of Constant Contact with Google Analytics through Tag manager

https://community.constantcontact.com/t5/Get-Help/Google-Tag-Manager-Duplicate-Triggers-On-Form-Subm...

 

Am I right?

 

Best wishes

UtahD
Marketing Legend
0 Votes

To clarify, I am using GA4 and GTM on my website. My website uses embedded Constant Contact forms. I use the recipe in this post to track when a Constant Contact form is successfully submitted.

UtahD
Marketing Legend

If you view source on a CC signup form, notice that the top-most parent div has a class of ctct-inline-form and then a unique data-form-id (unique to your form and made up from lots of random characters).

 

Notice, too, that there is a hidden success message div with class ctct-form-success. When that success message div becomes visible, then Google Tag Manager (GTM) should be able to track it. Because my site has multiple signup forms, I want to know which form was submitted by its unique ID. My GTM Tag has 3 parts.

 

1. A custom JavaScript variable that looks for the top-most parent div and then grabs the unique ID. The javascript is:

function() {
return {{Click Element}}.closest(".ctct-inline-form").getAttribute('data-form-id');
}


2. An Element Visibility Trigger that watches for the success message div to appear. The setup follows.

  • Selection Method: CSS Selector
  • Element Selector: .ctct-form-success
  • When to fire this trigger: Once per element
  • Minimum Percent Visible: 1 percent
  • Observe DOM changes: checked (I need the trigger to watch for the div to become visible)
  • This trigger fires on: All Visibility Events (I’d like to narrow this down, but don’t know how at the moment)

3. GA4 Event Tag. Setup follows.

  • Event Name: call_to_action (this is a made-up event name. You can call your event whatever you like).
  • Event Parameters:
    • Parameter Name: form_id (this is a made-up parameter. You will need to register it in GA4 as a custom dimension to use it in reports)
    • Value: {{the name of the var created in Step 1}}

Note: in Step 1, I don’t know why {{Click Element}} works since the user didn’t click the success message to make it show. Maybe that doesn’t matter to the GTM DOM trigger.


How does this work?

If a user subscribes to your Constant Contact form, then the “success” div will appear. The trigger will see that because it is watching for DOM changes. It will trigger the tag. The tag will use the variable from Step 1 to lookup the unique ID of the form that was submitted. The tag will send the custom call_to_action event to GA4 and pass the parameter “form_id”.

 

P.S. I have lots of signup forms, so I’ll probably use some kind of lookup table in my data report to convert the unique IDs to something more meaningful like “My Signup Form of Destiny”. I’m not using a lookup table in GTM because I am not the only content contributor so I won’t know when new forms are added. (shrug)

NatalieT598
Rookie
0 Votes

Thanks a million for this, UtahD! I was struggling to figure out how to create a LinkedIn conversion action via GTM with a in-line form and after hours of frustration I happened upon you post above and it looks like it's all working perfectly!

 

Thanks again!

 

  • Avatar

    Featured Article

    Use Sections to Build Email Campaigns Faster and Improve Engagement Rates

    Using Sections while designing your marketing email not only increases your own efficiency but helps you to deliver a more friendly, organized message. Check out some of the key benefits of using sections in email.

    See Article
  • Avatar

    Featured Thread

    Casual Conversations: What's your go-to playlist?

    If you listen to music while you work, share your playlist below so we can be inspired and maybe find some new music!

    View thread
  • Avatar

    Featured Thread

    Share Your Success Sweepstakes

    Share a success story from the last year and be entered for a chance to win great prizes!

    Enter now!
Updates
Just Getting Started?

We’re here to help you grow. With how-to tutorials, courses, getting-started guides, videos and step-by-step instructions to start and succeed with Constant Contact.

Start Here

73% of SMBs express doubt that their marketing strategy is effective. Does this sound familiar? Read our Small Business Now Report to learn how you can tweak your strategy to see better results.

Go read our article
Upcoming Webinars
DEC 12
Ask Us Anything: Your Digital Marketing Questions Answered
2PM - 3PM EST