Triggering custom function on portal signup

Developer help
1

Hey, I’m trying to integrate Plausible Analytics with the new membership portal and I was just wondering if anyone had a particularly good way of doing that.

Specifically what I want is for the function plausible('Signup') to run whenever somebody signs up on the membership portal, so that in my analytics I can identify the kinds of people who are actually signing up.

And of course one way to do that is a big mess of javascript with a ton of nested selectors that waits until everything is loaded and sneaks in an event listener on the ‘continue’ button, but I thought somebody here might know of a more elegant solution.

1 Like
2

Hi @Raymond_Douglas !
I want to do exactly the same thing. Did you find an easy solution?

3

Unfortunately not! The best I could do was add an event listener after the portal loads.

If you really want to pull this off properly I think you’d need to do a whole lot of custom membership flow. But if you come up with something please let me know!

4

Thanks for your response, how did you set up the event listener?
This is already enough to track conversions right ?

5

No, it’s very hard to get a good measure of conversions this way. We get a rough approximation by having a plausible function trigger when somebody clicks on the portal button, but it’s not enough to tell when people are actually converting, not least because that’s not the only way to open the portal.

The problem is, the buttons which you use to sign up, on the portal, do not actually exist when the page is loaded, so you can’t directly and immediately add an event listener to them. And adding them any other way seemed unreasonably fragile to us.

1 Like
6

what about being able to have a auto response when someone does sign up?

7

Jon, if you’re trying to set up an autoresponse you might find this thread useful - Ghost email subscription welcome page/autoresponder - #11 by EmpiricalEE

8

Hey, I’m trying to integrate Plausible Analytics with the new membership portal and I was just wondering if anyone had a particularly good way of doing that.

Specifically what I want is for the function plausible('Signup') to run whenever somebody signs up on the membership portal, so that in my analytics I can identify the kinds of people who are actually signing up.

And of course one way to do that is a big mess of javascript with a ton of nested selectors that waits until everything is loaded and sneaks in an event listener on the ‘continue’ button, but I thought somebody here might know of a more elegant solution.

9

I was looking for something similar and ended up setting up this:

<!-- 1. include portal script -->
<script defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://YOUR_GHOST_DOMAIN" data-api="https://YOUR_GHOST_DOMAIN/ghost/api/content/" data-key="YOUR_GHOST_CONTENT_API_KEY"></script>

<!-- 2. create button that activates portal -->
<button data-portal="signup/free" onclick="signupDidClick()">Signup</button>

<script>
// 3. setup handler for button click
function signupDidClick () {
 	
  // 4. wait a bit, just in case there are timing issues
  setTimeout(function() {
  	
    // 5. setup handler for submit
    function portalDidSubmit() {
      console.log('Submitted!');
    };
  
    // 6. listen for form button click
    document.querySelector('#ghost-portal-root iframe').contentDocument.querySelector('button.gh-portal-btn-primary').addEventListener('click', portalDidSubmit);
  
  	// 7. listen for Enter key
    document.querySelector('#ghost-portal-root iframe').contentDocument.querySelector('[type="email"]').addEventListener('keydown', function (e) {
      if (e.keyCode === 13) {
        portalDidSubmit();
      }
    });
  }, 300);
};
</script>

Demo in JSFiddle: