Forem: Jessica Valencia

Upgrade to the next generation of Google Analytics in Gatsby project

Jessica Valencia — Sun, 25 Oct 2020 20:32:10 +0000

Cover image produced by Google

Background

Did you know that Google has released new Google Analytics a couple of weeks ago?

It's perfectly OK if you didn't. Until a few hours ago, I myself didn't know about it. Although I use Google Analytics everyday for my website(카지노사이트) SEO. Somehow Google Analytics haven't shown me any update alerts or messages. I heard about it from some of my colleagues.

What's new in updated version?

Google Analytics can now detect device switching (like when a user changes from mobile to desktop) and will show you unified and integrated web & app reporting.
And much more that I don't understand right now
Most importantly: It is now default experience for all Google Analytics properties and where Google is investing for future improvements.

Problem

As I wrote in the follwing DEV post

How I got perfect Google Lighthouse score with Gatsby

Jessica Valencia ・ Sep 28 ・ 4 min read

#showdev #webdev #webperf #gatsby

my website(카지노사이트) is built with Gatsby.

In Gatsby.js, you install legacy (well, not yet but if you know what I mean) Google Analytics with gatsby-plugin-google-analytics. Like this way:

gatsby-config.js

plugins: [
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'UA-1*******0-2',
        head: true,
        defer: true,
      },
    },
    ...
]

The problem is, you cannot install newer version of Google Analytics in this way. And as far as I know, there is not a gatsby plugin for newer version yet. :(

Goal

For updated version, you need to add measurement ID that looks like G-********** and need to

Copy and paste this code as the first item into the
of every webpage you want to measure.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-**********"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-**********');
</script>

How to

1. Get GA4 stream measurement ID

First, log in to your Google Analytics account and click "Admin" button.

Next, click "Create Property" button.

Just ignore "Upgrade to GA4" here. It will take you to create property screen anyway.

Configure your property. Do as you like.

Then, select created property and click "Data Stream" tab, then click "Add stream" -> Web.

If you already have a Web stream, just click to see its details.

In detail page, you can get your measurement ID and gtag script:

2. Install acquired gtag in Gatsby project

My approach is a workaround but it will do its work before gatsby plugin update. I customized html.js as described in this article. FYI, html.js is what Gatsby uses to server render head tag and other components that React cannot touch.

First, copy `.cache/default-html.js` to `html.js`.

If you already have html.js, you can skip this step.

$ cp .cache/default-html.js src/html.js

html.js will look like the following:

 <html {...props.htmlAttributes}>
    <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
    </head>
    <body {...props.bodyAttributes}>
...

Edit `head` tag like the following:

<head>
    <script
        async
        src="https://www.googletagmanager.com/gtag/js?id=G-**********"
    />
    <script
        dangerouslySetInnerHTML={{
            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-**********');
        `,
        }}
    />
    <meta charSet="utf-8" />
    <meta httpEquiv="x-ua-compatible" content="ie=edge" />
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
        {props.headComponents}
</head>

Deploy your project.

Go to your Google Analytics and check if it works.

You can uninstall legacy tracking code and gatsby plugin after successful upgrade.

Conclusion

That's all folks!

If you find anything wrong in my post or have a better idea, please leave a comment to let me know.

If you're good at Gatsby.js, please come visit my website and share your idea. Any suggestion is welcome!

How I got perfect Google Lighthouse score with Gatsby

Jessica Valencia — Mon, 28 Sep 2020 21:09:59 +0000

A few weeks ago, I got assigned a project to open a website for SEO. Targeted keyword is casino know-hows and online casino website, which are very competitive in local.

I have used WordPress and Wix for my SEO projects before. But this time, I decided to use Gatsby because:

It should be blazingly fast for more competitive power
The website will be purely static
I wanted to have source code under my control
I wanted to challenge a new technique
And of course, it's React, so why not?

It took me 8 days for me to build a website from scratch and deploy to a server. The website 카지노 has 46 pages.

Google lighthouse and gtmetrix score is fairly high.

* Lighthouse score may vary according to locations and browsers

I'd like to share my experience passing google lighthouse audits:

Serve images in next-gen formats

You may have seen this message almost every time optimizing your website performance.

Google lighthouse really likes webp but webp images are notorious for not working with iOS browsers. There are workarounds like using <picture> tag, but it's a repetitive and dull work. I'm sure many developers give up with webps and just stick to jpg images.

With gatsby-image, you won't have this headache ever again.

For example, I use graphQL queries like this one:

query BlogPostByID($id: String!) {
  markdownRemark(id: { eq: $id }) {
    html
    fields {
      slug
    }
    description
    tag
    featuredimage {
      publicURL
      childImageSharp {
        fluid(maxWidth: 2048, quality: 64) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
}

Then in my component, I render like this:

import Img from 'gatsby-image'

<Img fluid={image.childImageSharp.fluid} />

Then in my html, I get element like this one:

Notice that there is an img tag with base64 encoded source. It is the blurred version of the original image. It's first shown before high-quality image is fully loaded. gatsby-image-sharp will crop and resize your images and generate thumbnails when you build your pages. All images are sized correctly and much network payload is saved.

It was like magic!

Gotcha

Please notice that I set webp quality as 64. It is known that lossless (or with 100% quality) webp compression will increase the size by 30%.

In other words, if you set quality to 100, webp image size will be bigger than your original image size.

Serve static assets with an efficient cache policy

Lighthouse requires you to return Cache-Control HTTP response header like this one:

Cache-Control: max-age=31536000

You can find how to set Cache-Control header in nginx and apache in this artice.

Gotcha

31536000 actually means 365 days or a year. I tried to reduce this value to 10 days(or 864000) but the warning message did not disappear. So I think you should leave it as it is.

Enable text compression

Gzip compression greatly reduces network bytes by compressing text-based resources.

Here you can find how to enable gzip compression in apache and nginx.

Background and foreground colors have a sufficient contrast ratio

I've seen many websites fail this audit. You might have to change your color palette if you want to pass this one.

According to lighthouse:

Text that is 18pt, or 14pt and bold, needs a contrast ratio of 3:1,
All other text needs a contrast ratio of 4.5:1

You can put Chrome DevTools's color picker to good use to check your contrast ratio:

Gotcha
If the background uses an image or animated css, lighthouse may not decide contrast ratio. In this case, the audit will be failed although it has enough contrast to the human eyes.

For example, casinohouse.link footer uses css animation. I couldn't persuade lighthouse that the footer had enough contrast ratio. As a workaround, I added another background color to links. And it looked better in that way.

Use HTTP/2 for all of its resources

My hosting web server uses CentOS and apache. Unfortunately, it uses HTTP1.1. I found out that it was not that easy to make it use http2. As a workaround, I enabled cloudflare for my domain. Then, the problem solved within a minute. And it was even FREE!

Conclusion

All the other audits were already handled by Gatsby. It was really convinient. Although this was the first time I used a Static Site Generator, I got satisfying result and I think my selection was perfect.

Please take a look around of my website and feel free to suggest any ideas and further optimizations.

Thanks for reading!

Forem: Jessica Valencia

Upgrade to the next generation of Google Analytics in Gatsby project

Background

What's new in updated version?

Problem

How I got perfect Google Lighthouse score with Gatsby

Jessica Valencia ・ Sep 28 ・ 4 min read

Goal

How to

1. Get GA4 stream measurement ID

First, log in to your Google Analytics account and click "Admin" button.

Next, click "Create Property" button.

Then, select created property and click "Data Stream" tab, then click "Add stream" -> Web.

In detail page, you can get your measurement ID and gtag script:

2. Install acquired gtag in Gatsby project

First, copy .cache/default-html.js to html.js.

Edit head tag like the following:

Deploy your project.

Go to your Google Analytics and check if it works.

Conclusion

How I got perfect Google Lighthouse score with Gatsby

Serve images in next-gen formats

Serve static assets with an efficient cache policy

Enable text compression

Background and foreground colors have a sufficient contrast ratio

Use HTTP/2 for all of its resources

Conclusion

First, copy `.cache/default-html.js` to `html.js`.

Edit `head` tag like the following: