Using Google Analytics for more in-depth tracking of members from a Memberstack Sign Up Form.
Difficulty level: Hard
Technical background: Advanced
Estimated time required: 10 minutes
What and Why?
I want to be able to see what kind of search traffic, landing pages, sources, etc are converting well to signups on my website with Memberstack. To do this, I need to fire a Google Analytics event when the signup form is submitted.
Adding Google Analytics to my signup form will allow me to track where a member has come from. Heap and other analytics services can't give you any info about what search terms people used to find the site.
How?
Set up your Google Analytics account and create a Property for your website.
Click on the Admin button, located on the bottom left. Then click on the Property, select "Data Streams" and click on your website. A pop-up should show up like below
Head over to Google Tag Manager, and store that "Measurement ID" as a variable named something like "gaProperty". Make sure the variable type is a "Constant" as shown below.
To use the "gaProperty" you need to add another variable type called "Google Analytics Settings", the Tracking ID should point to your "gaProperty"
Add this code to your website. This code goes in the beginning <Body> of each page where they might land after they sign up.
Special Tip: In Webflow, it's little more special. You'll need to add an HTML Embed on each page, and make sure it's the first thing in the Navigator under Symbols. It's also where you would put the Google Tag Manager code, but before the code below.
<script> window.onload = function () { MemberStack.onReady.then(async function(member) { console.log('memberstack is ready, memeber = ', member) var metadata = await member.getMetaData(); if (metadata.signupAt == null) { console.log('memberstack detected new signup') member.updateMetaData({ signupAt: Date.now() }); window.dataLayer = window.dataLayer || []; window.dataLayer.push({'event': 'new_signup', member_id: member.id }); } }) } </script>
Once that's been done, head over to your Triggers page and add a new Trigger.
The Trigger Type should be "Custom Event"
The Event Name is the key value pair of "event" is "new_signup".
window.dataLayer.push({'event': 'new_signup', member_id: member.id });
Viola! Now every time a user Signs Up it'll show up in your GTM!
Make sure to "Preview" your Tags and test them out before Submitting them.
How to add other information for Google Tag Manager to read:
Create a Data Layer Variable, the variable name should match the key of the information you're pushing.
Now Memberstack is sending information, we just created a variable for the information but GTM doesn't know yet know they are connected. So you would do this by going to your trigger again, click the "Sign Up" Tag
Then add a Label to the Tag Configuration and use the variable Member ID you just created.
And now you have all the information you're tracking!
Comments
0 comments
Please sign in to leave a comment.