Forem: Sara Gibbons

Server Side React + Google Analytics Event Tagging

Sara Gibbons — Tue, 12 Nov 2019 23:16:42 +0000

Often times whether you are working on client or server side rendered React it all feels the same. All the same familiar pieces and how you develop. It isn't until you hit a dark corner on a server side rendered (SSR) React app where you get a window undefined message that you begin to question your life choices. Google Analytics event tagging is one of those dark corners.

Getting Google Analytics Wired In

Now, tracking page views to Google Analytics, pretty straight forward for an SSR React app. For those of you who haven't dug into that, here is the pieces that make that happen:

1. Just like the docs say, "Add gtag.js to your site"

This translates to somewhere incorporated into your app you will have something along the lines of:

import React from 'react';
import Head from 'next/head';

import { GA_TRACKING_ID } from '../lib/gtag';

const Meta = () => (
  <Head profile="http://www.w3.org/2005/10/profile">
    <title key="title">My Awesome Website Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charSet="utf-8" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <meta
      name="description"
      content="The super neat description of my site"
    />
    <meta
      name="keywords"
      content="saragibby, sara, gibby, who runs the world"
    />

    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
    />

    <script
      dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}');
          `,
      }}
    />
  </Head>
);

export default Meta;

Where the value of GA_TRACKING_ID is the tracking identifier assigned to your Analytics site.

Once you have this baked in you are up and running. Each time this snippet renders it will send a pageview hit to the connected Google Analytics account.

In the example above, I have this rendering as part of the layout of a page. Which means each time the layout is rendered a ding to the pageview hits. Which gives us our log of each pageview for the site.

I haven't yet found many situations where this doesn't track a pageview as expected. I've read a couple of people recommend adding a trigger to Analytics when the route changes, something like:

Router.events.on('routeChangeComplete', url => gtag.pageview(url));

Test your site, see if you need it. Some people reference shallow rendered components, but I just care about the page anyway, the other intel I want is in the user behavior... the event tagging.

Let's get those events tagging in Analytics

You got Google Analytics tracking your page views, but now what you really want to know is things like "Which of the buttons gets the most clicks?"... "How many people click to 'show more'?" I know! I love all those juicy deets too!

But Analytics isn't going to make this an easy journey for server-side rendered app. Now, you can pretty easily follow the docs and get a client-side rendered up hooked up for event tagging. But, server-side, if you have tried before to log events you've most likely hit the "window undefined" error. Cause, well it is. You are on the server, there is no window at the time of render.

If you have hit this in other areas of your application you most likely found you can get around this by using componentDidMount to access the window. But add a componentDidMount to each component you want to track events on so that you can et around the window undefined error for Analytics, less than ideal.

What you can do is add a a couple of functions that will trigger each other on a client side event.

First piece, create a shared lib or util file for your Google Analytics functions (now this assumes you have Analytics wired into your app like above). You will most likely add to this file as your app grows, but to start it may just have this function:

// relative path to file: lib/gtag.js

export const event = ({ clientWindow, action, category, label, value }) => {
  clientWindow.gtag('event', action, {
    event_category: category,
    event_label: label,
    value,
  });
};

This gives you an event function you can call, passing in the values you want to track for the given event. You can then import this function to the component that has the onClick (or whatever other) event you want to add a tag in Analytics for.

You'll see we pass in clientWindow here as opposed to just getting window within the function. We do this cause when the import happens during the server-side render, when window will still be undefined. If we trigger this function on the client-side event the window will exist and we can pass it in as an argument.

Here is how that will look in your component:

import * as gtag from '../../lib/gtag';

const CoolLink = ({ className, linkText }) => {
  const clickTracking = e => {
    gtag.event({
      clientWindow: window,
      action: 'click',
      category: 'link button',
      label: props.label,
    });
  };

  return (
    <a
      href={props.href}
      onClick={clickTracking}
      className={className}
    >
      {linkText}
    </a>
  );
};

In this example, the clickTracking function for CoolLink is only fired for the client-side click event on the anchor tag. It sends the event tag to Analytics and then completes the default/expected behavior of the link. The best part window is defined here!

Now, one change can spoil the fun. Let's look close at this line onClick={clickTracking}. Here the clickTracking function is being passed in but not evaluated. So when in renders on the server it is not evaluating the part of that function referencing window.

If you change this line to onClick={clickTracking()}, with the added parens on the function, the function will evaluate on render of the component. In this case, that means it will render on the server, hit the call to window and spit out the window is undefined error.

Sweet, but I need to pass an argument to my tracking function, halp!

I got you. Here is what you need to do... change your clickTracking function to take the arguments you need:

  const clickTracking = (e, label) => {
    gtag.event({
      clientWindow: window,
      action: 'click',
      category: 'link button',
      label: label,
    });
  };

You will still trigger this function onClick but remember we don't want it to evaluate so we can't go with our instincts here to add on onClick={clickTracking('newsletter')}. We still want to pass in a function that will evaluate onClick, so that is exactly what we are going to do:

onClick={() => clickTracking('newsletter')}

There you go, track your events, report on all the things and enjoy the server-side rendered goodness!

Better Way To Embed Active Campaign Forms Into React

Sara Gibbons — Mon, 04 Nov 2019 02:47:04 +0000

Let's face it, embedding scripts in your React app just makes you feel like you need a shower. So when Active Campaign comes along with a form you embed you feel a lot of, "Get outta here!" Even better you have to build it to match a pre-defined style. Yeah, I feel ya.

Realizing we have to deal with this beast we are left with 2 options after we create the form in Active Campaign:

1. Style the form within Active Campaign.

This will most likely mean investing hours of your life fighting with the limited options and custom styles. Sure do able, but for most of us developers out there, this is super frustrating. As you are not just trying to make that more look decent, it needs to match your exact syles, and oh yeah render properly within your site.

For those of you brave enough to travel this path, may the force be with you. If you do, here are my tips:

Either use the form for just the form input and submit elements or for the entire form section you are working to build. No gray area here. Limited, or all in.
Don't wait to dive into the custom styles. It's really the only way you are going to get anywhere. Get the tags set up that you need, stay organized and might against all urges to reach for the !important... we all know that ends no place good.

When you have your form ready, for the sake of organization give that thing its own React component. It will need to be a React.Component so that you can utilize the componentDidMount function. Here is where you will inject the Active Campaign provided script into the page. You will end up with something like:

class ActiveCampaignForm extends Component {
  componentDidMount() {
    const script = document.createElement('script');

    script.src = 'https://youareawesome.activehosted.com/f/embed.php?id=1';
    script.async = true;

    document.body.appendChild(script);
  }

  render() {
    <div className="_form_1" />
  }
}

In the above script.src is the script provided by Active Campaign and the element rendered is a div with the id of your Active Campaign form you are embedding.

If you try to style the div or rendered form here in your component. Good luck. When the form fully renders from the Active Campaign script it will overrule all you have here. It is custom styles within Active Campaign for nothing.

Now, if your form is pretty basic, no super custom styling, this may be the perfect solution for you. Enjoy it while it lasts. This is also a decent solution to prove that you have all wired correctly in Active Campaign... list, emails, post-submit form, all that good stuff. Just don't get too attached if you have custom styling tasks in your future.

2. Build your own form in React. Post to the URL of the Active Campaign form.

Ok, now we are talking. Full control of your form and styling all within your component. Beyond that, you can keep the user within the experience of your site and not have to bounce then into Active Campaign.

To do this, again, give this beast its own component. It will help with organization, writing tests, plus I like things to have one purpose.

Now, Active Campaign is not going to give you what you need easily. But all the information you will need is baked into the block of "Full Embed" code that they provide. Within that look for the form, you will need the URL the form submits to as well as all the hidden inputs. Here is what this is going to look like:

class ActiveCampaignForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      formSubmitted: false,
    };

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('https://youareawesome.activehosted.com/proc.php', {
      method: 'POST',
      body: data,
      mode: 'no-cors',
    })
      .then(response => {
        this.setState({ formSubmitted: true });
        setTimeout(() => {
          this.setState({ formSubmitted: false });
        }, 5000);
      })
      .catch(error => console.log('Request failed', error));
  }

  render() {
    const { formSubmitted } = this.state;

    return (
      <div>
        <h5>Join our mailing list!</p>

        { formSubmitted && (
          <p>
            <strong>THANK YOU</strong> for joining our mailing list!
            <br />
            Check your inbox for a confirmation.
          </p>
        )}

        { !formSubmitted && (
          <form onSubmit={this.onSubmit}>
            <input type="hidden" name="u" value="1" />
            <input type="hidden" name="f" value="1" />
            <input type="hidden" name="s" />
            <input type="hidden" name="c" value="0" />
            <input type="hidden" name="m" value="0" />
            <input type="hidden" name="act" value="sub" />
            <input type="hidden" name="v" value="2" />

            <input
              type="text"
              name="email"
              placeholder="ex: hello@youareawesome.com"
              required
            />
            <input type="submit" value="Submit">
          </form>
        )}
      </div>
    );
  }
}

In the above, I simply built the form I wanted out exactly how I wanted it. Added an onSubmit handler to submit the values entered and set it to send to the URL I found in the provided "Full Embed" code from Active Campaign.

A few things to note:

I hit a CORS issue that prevented the fetch from occurring. There may be other ways to solve this, I just reach for adding mode: 'no-cors' to the fetch options to get passed that issue.
I opted to add a state here to know if the form was submitted, formSubmitted. I did this so that I could display a message to the user so that they knew their sign up was successful.
The catch fo when an error occurs on the submit should really be more sophisticated than a console.log, but hey, we all start somewhere. In my case I'm going to update this to Sentry.captureException(error);.

Now you are off. You have the best of both worlds, a form you can easily and fully style exactly how you need to and the convenience of using an Active Campaign form tied to a list.