Log HTTP status code to Google Analytics Custom Dimension

Question

I'm trying to keep track of pages that result in errors on my Ghost blog. A live error page can be found here:

https://jessehouwing.net/404/

To do this I've added the following code to the error pages.

Header

<script async type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=UA-29964481-1"></script>
<script type="text/javascript">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-29964481-1', {
    'custom_map': {'dimension1': 'statusCode'}
  });
</script>

Footer

<script>
    gtag('event', 'httpError', { 'statusCode': 404 });
</script>

And created my custom dimension in the Analytics portal for this property:

And in the Developer Console I can see the request being made:

Yet the event doesn't show up in the analytics portal

My question(s)

How can I debug this without entering random data?! And what should I put in the configuration / error page template to see pages hitting this event?

Answer 1

This seems to have been correct all along, except that Google Analytics doesn't seem to be interested in TODAY by default and reports up until the end of yesterday: