gridsome-source-google-analytics-reporting-apiを公開しました

久しぶりに OSS を書いたので、お知らせです。

(業務で使うものなので)業務時間中に書いたこともあり、社の Organization 配下に置いています。多分メンテナーは僕だけですが。

公開したもの

hasigo/gridsome-source-google-analytics-reporting-api

Google Analytics からデータを引っこ抜く Gridsome 向けのプラグインです。使い方は README を参照してください。

開発した経緯

現在弊社では福岡スタートアップニュース関西スタートアップニュースを開発、運用していまして、これの技術スタックは以下の構成となっています。また、次に話があるプロジェクトも(僕はリードエンジニアではなく、サポートのみの予定ですが)同様の構成で検討しています。

  • Gridsome1
  • Tailwind CSS2
  • AWS Amplify3
    • 一部 AWS CDK4 で構築
  • Contentful5

開発がスタートした当時、別案件で Vue.js を使っていたこともあり、脳内コンテキストスイッチを切り替えずに済むよう、Vue.js 製の Gridsome を採用したわけですが、やっぱり GatsbyJS6 のエコシステムと比べると、Gridsome はまだまだで、plugin の数が圧倒的に少ないです。

Gridsome は公式に「GatsbyJS にインスパイアされた」と謳っており、その plugin も GatsbyJS の系譜を引き継いだものが非常に多いです。一方で、GatsbyJS にはあるけど Gridsome にはない、という plugin も多数存在しています。

今回公開したものも、GatsbyJS にはあるけど Gridsome にはないもの、です。

元ネタ

元々の GatsbyJS の plugin はこちらです。

antonmedv/gatsby-source-google-analytics-reporting-api

コード量を見てみてると、結構簡単に移植できそうだったので、移植をやってみることにしました。

改変した箇所

ただ移植しても面白くない(実際は Gridsome と GatsbyJS で提供されている API が違うので、どう書けば動くのか結構四苦八苦しましたが)、というか今回使いたい要件に合致しないので、別の GraphQL Schema に merge できるオプションを追加しています。

ランキング表示用に Google Analytics の PV 数を使いたいというのが要件だったので、出来れば既存の GraphQL Schema のプロパティとして追加したいわけです(GraphQL 側でbelongsToとか使えばもしかしたら出来るかもしれませんが、filterがつけれなさそうに見えたので、諦めました。詳しい人いたら教えて下さい)。

今回は headless CMS として Contentful を使っているので、README にも記載していますが、オプションを引き渡すことで、ContentfulPost のプロパティに Google Analytics の PV 数である totalCount が取得できるようにしました。

query {
  allContentfulPost {
    edges {
      node {
        id
        title
        totalCount
      }
    }
  }
}

もちろんオプションで可変なので、環境に合わせて自分の Schema に変更出来ます。ただ現状はpathをキーとして merge しているので、そのあたりでトリッキーなことをしていると、意図した動作をしないと思うのでご注意を。

これで例えばランキング用の Component なんかでtotalCountorderしてlimitかけたものをstatic-queryもしくはpage-gueryで投げてやれば、いい感じに要件が満たせるって寸法です。

今後のロードマップ

ロードマップと言うほど大それたものではありませんが、今日 1 日でえいやで書いたコードなので、粗が目立ちます。なのでそのあたりを直していきたいですね。

小さいモジュールとはいえ、やることは多いですね、書き出してみると。まぁ npm モジュールって書いたことなかったので、実験がてら、色々やってみます。

ただ書いたはいいけど、npm に公開ってなんかメリットあるんでしょうか…?GitHub 経由で入れれるんだし、プロモーション以外で npm に公開するメリットが見当たりません。詳しい人いたら教えてください!

P.S.

そもそもランキングなんてものは無用の長物だと思ってるので、そこは論破してやりたいと思ってます。今はまだ論破できない…ぐぬぬぬ…。

あと、僕はいつの間にかつよつよエンジニアに転生してました。ネタサイトだけど、何を基準に出してるのか気になりますね。

Avatar
nabeen
Coder

🤞👁👄👁👍

comments powered by Disqus
Next
Previous