Integrating Google Analytics with embed script Answered

• 

  Julian Galluzzo

  • November 23, 2023 19:02

  for the cases, assuming youre using 2.0, I believe it should be await.memberstack instead of MemberStack.onReady

  Also, you need to first make sure the dom package is inisialized with const memberstack = window.$memberstackDom

  https://developers.memberstack.com/docs/dom-front-end-package

  0
• 

  Abdelhalim WithDev

  • November 23, 2023 19:02

  Julian Galluzzo I have used await.memberstack instead of MemberStack.onReady and still have the same issue. it says not defined.

  <script>
  
  const memberstack = window.$memberstackDom
  
  window.onload = function () { await.memberstack.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, email:email }); } }) } 
  
  </script>

  error: Uncaught ReferenceError: await is not defined

  0
• 

  Marc Hudson

  • November 23, 2023 19:04

  Here’s a simplified version of the code I use to wait for $memberstackDom to become available:

  // Helper function - could be reused elsewhere.
  const waitFor = function(key, value, timer, callback) {
  var nTimer = setInterval(function() {
  // wait for something to load...
  if (key.hasOwnProperty(value)) {
  callback();
  clearInterval(nTimer);
  }
  }, timer);
  };
  // Wait for $memberstackDom.
  waitFor(window, '$memberstackDom', 50, function() {
  // Load Member.
  $memberstackDom.getCurrentMember().then(({ data: member }) => {
  member = member || {};
  // Do stuff...
  console.log(member.metaData);
  });
  });

  0
• 

  Abdelhalim WithDev

  • November 23, 2023 19:04

  Marc Hudson Thanks so much

  0
• 

  Marc Hudson

  • November 23, 2023 19:06

  You probably want to add another Helper function to check whether the member object is empty (logged-out user), otherwise your JS will error when looking to work with the metadata.

  Helper to check a key exists in a JS Object.

  const checkKeyExists = function(object, key) {
  return object.hasOwnProperty(key);
  }

  Which you can use in the original code:

  // wait for something to load...
  if (checkKeyExists(key, value)) {
  callback();
  clearInterval(nTimer);
  }

  And within the getCurrentMember() callback:

  // Do stuff...
  if (checkKeyExists(member, "id")) {
  // Member object isn't empty, must be logged-in.
  console.log(member.metaData);
  }

  Hope that works. Not easy coding in Slack’s dark-mode 🙂

  0
• 

  Sarika Ponnanna

  • August 25, 2024 14:24

  Needed some input.
  I am trying to set-up a reporting (on GA4 or google sheets) which allows us to provide data every time a user logs in. Can anybody guide me how can I set this up?
  I don't I can extract the event "Member-login" from memberstack - is there any other way??

  0
• 

  Raquel Lopez

  • August 25, 2024 14:24

  Memberstack doesn't have a native integration with Google Analytics.

  You would have to create the event in the frontend (Maybe with the help of GTM to be easier) to be able to see it in your reports. You can create a click event or a pageview event if you want to track custom events https://www.analyticsmania.com/post/how-to-track-custom-events-with-google-analytics-4/

  However, for member specific events I recommend using the user id property in Analytics, that way you can filter your reports to login users only. https://www.analyticsmania.com/post/google-analytics-4-user-id/

  0

Please sign in to leave a comment.