Integrating Google Analytics with embed script Answered

Post author
Abdelhalim WithDev

Hello everyone,

I am trying to put the embed script in a Webflow Project to integrate Google Analytics.

<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, email:email }); } }) } </script>

but on console it says "MemberStack" is not defined.

should I define MemberStack as window.$memberstackDom or is it something different?

Comments

5 comments

  • Comment author
    Julian Galluzzo

    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
  • Comment author
    Abdelhalim WithDev

    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
  • Comment author
    Marc Hudson

    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
  • Comment author
    Abdelhalim WithDev

    Marc Hudson Thanks so much

    0
  • Comment author
    Marc Hudson

    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

Please sign in to leave a comment.