How to implement an event listener for memberstack custom fields to track update origins? Answered

Post author
Shadi null

Does memberstack provide an event or callback I can listen for to ensure a page is done loading memberscript custom fields?

I am trying to overwrite a custom field contained in memberstack with a specific string. The idea is to know where the members profile was updated from and filter my make.com scenario's based on if the update originated from webflow or from another scenario

The idea is to create a custom field that I would use as a switch to check if its a scenario induced memberstack update or a webflow induced one and then filter the first module based on if the custom field says "webflow" or "make".

Kinda like this;

<input required="required" type="text" id="originatedFrom" name="originatedFrom" data-ms-member="originated-from" value="webflow" readonly>

<script>
window.onload = function() {
    document.getElementById('originatedFrom').value = 'webflow';
}
</script>

I unfortunately quickly learned that this method doesnt have 100% success rate as sometimes the value is overwritten by the custom field's value instead of being hardcoded to "webflow".

Comments

7 comments

  • Comment author
    Chris Drit

    That’s a good question, I don’t know the answer, but maybe some of this helps…

    If you were using the DOM package you could use it like this.

    But it sounds like you want to know when a data attribute has been populated.

    Memberstack does have a way to display a custom loading screen for data attributes.

    If not, there is always the option of using a Javascript event listener on your form inputs value. When the value changes (the data attribute populates the value) it’ll trigger a function for you.

    I too will be curious to know “the official” answer from someone at Memberstack. It would be a nice addition if it didn’t already exist.

    0
  • Comment author
    Julian Galluzzo

    I am with Memberstack but I'm definitely not on the dev team so don't count this as an official answer - however, the DOM package has this here: https://developers.memberstack.com/docs/dom-front-end-package#get-current-member

    I've used it a few times - I guess you could just have an event listener for this getCurrentMember ?

    0
  • Comment author
    Chris Drit

    Unfortunately that’s the front end DOM package I was mentioning above. It appears the OP is doing is using data-attributes to populate values. That would be outside of making DOM API calls (and the handy features it provides).

    0
  • Comment author
    Julian Galluzzo

    It would be quite easy though to still use the DOM package - in Webflow you just need to get the memberstack object in the script and then you can just use the DOM package right away

    0
  • Comment author
    Shadi null

    Sorry for the slow response time!
    I was traveling back to Germany from Asia and was stuck with really poor wifi in transit.

    Chris Drit I gotta tell you, your learning resources have been invaluable to me! Thank you SO MUCH for all the amazing free learning resources on NoCodeQuest! My whole editing user generated CMS content pipeline is built off of your tutorial 🙂

    Julian Galluzzo Thanks for the resource!!!

    I ended up resorting to something like this, and it seems to work perfectly. Though I have not tested it enough to be certain that it has 100% success rate. (though the script might be a little bit overkill)

    <input required="required" type="hidden" type="text" id="originatedFrom" name="originatedFrom" data-ms-member="originated-from" value="Webflow" readonly>

<script>
function setToWebflow() {
    var inputElem = document.getElementById('originatedFrom');
    inputElem.value = 'webflow';
    inputElem.removeAttribute('src');
}

document.addEventListener('DOMContentLoaded', function() {
    setToWebflow();  // Set immediately on DOM load
    
    // Mutation observer to watch for changes
    var targetNode = document.getElementById('originatedFrom');
    var config = { attributes: true, childList: false, subtree: false };

    var callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
            if (mutation.type === 'attributes') {
                setToWebflow();  // Force set to Webflow if any attribute changes
            }
        }
    };

    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
});

// Ensure Memberstack has loaded
window.$memberstackDom.getCurrentMember()
    .then(() => {
        setToWebflow();  // Set after Memberstack has fetched member
    })
    .catch(err => {
        console.error("Error with Memberstack:", err);
    });
</script>
    0
  • Comment author
    Chris Drit

    Chris Drit I gotta tell you, your learning resources have been invaluable to me! Thank you SO MUCH for all the amazing free learning resources on NoCodeQuest! My whole editing user generated CMS content pipeline is built off of your tutorial 🙂

    Dang… that makes me soooo happy to hear! 🙏

    I ended up resorting to something like this, and it seems to work perfectly.

    I see what you did there. Nice build!

    0
  • Comment author
    Julian Galluzzo

    I second that Chris Drit! Your comments/resources have saved me more times than I can count 🙏

    0

Please sign in to leave a comment.