How to use Google Analytics with Memberstack

Article author
Josh Lopez

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

 

Screenshot_2021-03-17_at_1.30.34_PM.png

 

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.

 

Screenshot_2021-03-17_at_1.30.06_PM.png

 

To use the "gaProperty" you need to add another variable type called "Google Analytics Settings", the Tracking ID should point to your "gaProperty"Screenshot_2021-03-17_at_1.29.31_PM.png

 

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.

 

Screenshot_2021-03-17_at_1.29.00_PM.png

 

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.

 

Screenshot_2021-03-17_at_1.28.24_PM.png

 

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

 

Screenshot_2021-03-17_at_1.27.03_PM.png

 

Then add a Label to the Tag Configuration and use the variable Member ID you just created.

 

Screenshot_2021-03-17_at_1.26.57_PM.png

Screenshot_2021-03-17_at_1.26.42_PM.png

And now you have all the information you're tracking!

Was this article helpful?

Comments

2 comments

  • Comment author
    Rokas Judickas

    But if the user signups, lands on a page and then the script retrieves its object – the signup date value will not be null? It will always track it as login, no?

    Correct me if I'm wrong. 

    0
  • Comment author
    Abdelhalim WithDev

    On Webflow when I used the <script> embed you provided it says MemberStack is not defined. so what does "MemberStack" supposed to be? is it window.$memberstackDom?

    0

Please sign in to leave a comment.