GitHub Pagesで自作portfolioを公開して、Google Analyticsでアクセス情報などを収集するようにした話

これは何か

• portfolioを公開して、Google Analyticsでデータ収集するまでに自分が参考にしていたサイトをまとめを載せたもの
• 詰まった部分とそれをどう解決したのか記しておき、今後に活かす。
• 正直、ただのリンク集になっているが、備忘録を兼ねているのでOKかなと。
• 自分が作成したものはこちら。

背景

• 自分のGitリポジトリを整理していた際に、portfolioにして公開したら見やすいんじゃないかと思ったのがきっかけ。
• せっかくなら導入が簡単と聞くGoogle Analyticsを入れて、データの収集および分析ができるようにしても面白いのかも、実務にも活かせるかもと思い、それも採用

大まかな手順

• portfolioの公開
  • GitHubアカウントを作る。
  • テンプレートを使ってportfolioを作成する。
  • GitHub Pagesを使ってportfolioを公開する。
• Google Analyticsの導入
  • アカウントの作成
  • portfolioにトラッキングコードを仕込む
  • イベントトラッキングを仕込んでおく
  • APIを使ってPythonでデータを抜き取れるようにする(別記事にて掲載予定)

1. portfolioの公開

1.1 GitHubアカウントを作る。

• https://github.com/ からSign upしてアカウントを作成する。
• GitHubに秘密鍵を登録する際は、下記記事が参考になる。
  • GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~
• なお、Gitを使ったことがないという方は下記サイトなどを使って勉強しておくと良いと思います。エンジニア職であれば、今はほぼどこでも使うと思うので。
  • サル先生のGit入門

1.2 テンプレートを使ってportfolioを作成する。

• HTML5 UPでhtml5やcss3で作成されたオシャレなテンプレートがあるので、こちらを使う(各テンプレートにある Free Download ボタンをクリックするとダウンロードできる)。
• Webデザイナーの方はテンプレートは使わない方がいいかもしれない(筆者はデザイナーではないので詳しくはわからないが)。
• テンプレートをダウンロードしてきたら、それを編集してportfolioを作成する。
  • 基本的には、index.html(複数ページ作成したければ、他のhtmlファイルも)を編集すれば充分
  • htmlを全く読んだことないと言う方はこちらですぐに基礎を学べると思います。
  • ただ、htmlのテキストやリンクの編集、画像の表示まではそこまで難しくないので、index.htmlをいきなり読み始めても問題ないと思います。

1.3 GitHub Pagesを使ってportfolioを公開する。

• これについては、下記記事でまとまっています。
  • https://qiita.com/tomotlab/items/0a8f2db2781d023aac4a

2. Google Analyticsの導入

2.1 アカウントの作成

• 必要なアカウントは2つです。
  • Googleアカウント
  • Google Analyticsアカウント

2.2 portfolioにトラッキングコードを仕込む

• portfolioのアクセス情報を収集できるようにトラッキングコードを仕込みます。
• こちらが参考になるかと思います。

2.3 イベントトラッキングを仕込んでおく

• ページの遷移を伴わない(ファイルのダウンロードやボタンのクリックなど)ユーザー行動を収集する際には、イベントトラッキングを使用する必要があります。
• こちらが参考になるかと思います。
• トラッキングコードの種類で埋めるタグが変わるようなので注意です。筆者はこれに気づかず、30分以上時間を費やしました...

2.4 APIを使ってPythonでデータを抜き取れるようにする(別記事にて掲載予定)

• 記載の通り、別記事にて掲載予定です。掲載したら、ここにリンク貼っておきます。

おわりに

• qiitaに毎月１投稿を心がけていますが、今月はコンペに忙しく、あまり記事になるようなことができませんでした(普段からまともなものを書いているかもあやしいですが)。
• 来月はコンペが終わるので、もっと良いもの書きます！！