gtag 연동을 쉽게 하기 위한 환경변수 등록

[whatisand]

블로그 운영시 구글 애널리틱스를 자주 이용하곤 합니다. gtag id를 blog-config.js 에 설정할 수 있도록 하면 더욱 편리하게 연동하여 사용할 수 있을 것으로 생각합니다.

[whatisand]

SEO 부분

import React from "react"
import { Helmet } from "react-helmet"
import { siteUrl } from "../../../blog-config"
import { gtag } from "../../../blog-config"

const SEO = ({ title, description, url }) => {
  return (
    <Helmet>
      <title>{title}</title>
      <meta property="og:url" content={url} />
      <meta property="og:title" content={title} />
      <meta property="og:image" content={`${siteUrl}/og-image.png`} />
      {description && <meta name="description" content={description} />}
      {description && <meta property="og:description" content={description} />}
      <script
        async
        src={"https://www.googletagmanager.com/gtag/js?id=" + gtag}
      ></script>
      <script>
        {`window.dataLayer = window.dataLayer || []; function gtag()
        {dataLayer.push(arguments)}
        gtag('js', new Date()); gtag('config', '`+ gtag + `');`}
      </script>
    </Helmet>
  )
}

export default SEO

blog-config 부분

module.exports = {
  title: "Kim Dongwoo",
  description: "세상과 다른 방법으로 살고싶습니다.",
  author: "kimdongwoo",
  siteUrl: "https://whatisand.github.io",
  links: {
    github: "https://github.com/whatisand",
    linkedIn: "https://www.linkedin.com/in/andkimdongwoo",
    facebook: "https://www.facebook.com/andkimdongwoo",
    instagram: "https://www.instagram.com/dwkim_and",
    email: "mailto:[email protected]",
  },
  utterances: {
    repo: "whatisand/whatisand.github.io",
    type: "pathname",
  },
  gtag: "", // G-339F6827QY
}

[devHudi]

이슈 생성 감사합니다 :)