Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples for "Triggering custom events" #80

ekeih opened this issue Dec 5, 2020 · 1 comment

Examples for "Triggering custom events" #80

ekeih opened this issue Dec 5, 2020 · 1 comment


Copy link

ekeih commented Dec 5, 2020


first of all thanks for this plugin!

Being rather new to JavaScript and React I have a hard time to wrap my head around the documentation for custom events.

I tried to get this to work for a few hours now and I think I understand why all my attempts fail (I think I always tried to evaluate it during the server side rendering of gatsby/react) but I still can't really figure out the right way to solve it. As far as I understand this code has to be evaluated on the client side when the page actually loads or the event is executed.

For example, I would like to include

window.plausible('404', {
  callback: () =>'custom 404 event logged'),

in my 404 error page and then use to track those errors. What would be the right way to achieve this in gatsby? Do I need to do this in componentDidMount somehow?

I think the documentation would benefit from an example how to run such custom event at page load and on button press.
Any chance you could help me out here with a short explanation? I am happy to provide a pull request to extend the documentation afterwards :)

Thanks in advance

Copy link

ekeih commented Dec 6, 2020

Okay, I think I got it working. In the end it turned out to be much simpler than I thought. For me the following works as a minimal 404 component which reports a custom 404 event to plausible.

// 404.js component
import React from "react"

export class NotFoundPage extends React.Component {
  render() {
    return (
      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>

  componentDidMount() {
    if (!window.plausible) {
      console.log("Would have tracked: 404")
    } else {

export default NotFoundPage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

1 participant