Hello!
I was wondering if I could get advice on how to connect to memberstack api to use their update methods on members(https://help.memberstack.com/en/articles/3850012-front-end-api). I am trying to update the member data after the user finishes watching at least 90% of the video on our site. I am using a custom code element instead of a video element to show the video like this:
and this is what I have so far in that HTML embed:
<div class="ratio">
<div class="vimeo" id="427174875"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
initVimeo();
});
function initVimeo() {
let total_viewed_time = 0, start_time = 0, end_time = 0, length=0, isFinished=false;
const vimeo = document.getElementsByClassName("vimeo")[0];
const options = {
url: '{{wf {"path":"video-id","type":"PlainText"\} }}',
responsive: true,
quality: "720p",
width: "100%"
};
const player = new Vimeo.Player(vimeo, options);
player.on('timeupdate', function(data) {
if (data.percent >= 0.9) {
end_time = new Date().getTime(); // milliseconds
total_viewed_time += end_time-start_time; // milliseconds
if (total_viewed_time >= length && isFinished===false) {
isFinished = true;
// update member data through memberstack api here
MemberStack.onReady.then(function(member) {
console.log(member["name"])
console.log(member.loggedIn) // returns true or false
})
}
}
});
player.on('play', function(data) {
start_time = new Date().getTime(); // milliseconds
end_time = start_time;
});
player.on('progress', function(data) {
length = data.duration * 900
});
}
</script>
And it returns undefined for the console log part:
I’m wondering what might be missing, since I have already installed Memberstack header script in the project setting->Custom code->Head code.
Would really appreciate any suggestions!! Thank you!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)