GhostにGoogle Analyticsを設定する

GhostにGoogle Analyticsを設定する
Photo by Michael Dziedzic / Unsplash

GhostでGoogle Analyticsを使う方法は、以下のリンクに記載があります。Ghost側の管理画面で、Settings -> Code injection と進み、ヘッダにGoogle Analyticsのコードを埋め込むと使えるようになります。

Official Ghost + Google Analytics Integration
Integrate your Ghost publication directly with Google Analytics using sensible code injection for in-depth site metrics in realtime 👉📈

この記事では、上記のリンクに沿って設定した手順を記録しておきます。

Google Analyticsの設定

新しくアカウントを作る際には、Google Analyticsのサイトに行き、指示に従って新しいPropertyを作成する。

すでにアカウントを持っている場合は、Createボタンから新しくプロパティを作成する。

Propertyの作成

指示に従って、必要な情報を入力していきます。

  • まず左上のCreateボタンをクリックし、Propertyを選択します
create_property
Propertyの作成
  • Propertyの名前を入力し、地域、通貨を選択します
Property名、地域、通貨の選択
Property名、地域、通貨の選択
  • ビジネスのカテゴリと規模を選択します
ビジネスの詳細
ビジネスの詳細
  • ビジネスの目的を選択します
ビジネスの目的
ビジネスの目的
  • データ収集の設定をします。ブログなどWebサイトの場合はWebを選択します
データ収集設定
データ収集設定
  • 自分のサイトのURLを入力し、このストリームに名前をつけます。その下の測定項目はデフォルトのままで全て選択されているのでそのままで大丈夫です。選びたい場合は歯車アイコンから選択できます。
URLとStream名の設定
URLとStream名の設定

トラッキングコード

Create Streamをクリックすると、トラッキングコードが生成されるので、クリップボードにコピーしておきます。あとでこの画面に戻ってくるので、タブは閉じないでおいたほうが便利です。

Ghostの設定

Ghostの管理画面に戻ります。

画面左下の歯車アイコンからSettingを開き、Code injectionの項目を探します。

開いたらSite headerの1行目にコピーしたトラッキングコードを貼り付けます

設定できたことを確認

Google Analyticsのトラッキングコードの画面に戻り、Test your website (optional):のところに自分のサイトのURLを入力して、TESTをクリックします。正しくコードが設置されていたら緑色のチェックマークが入ります。

💡
Ghost側でMake site privateをオンにしてサイトにパスワードを掛けていたりするとうまくいかないので、外しておいてください。

実際のデータ収集が開始されるまでは最大48時間かかるとメッセージが出るので、それを目安にGoogle AnalyticsのサイドバーからReportsを開きます。Realtimeをクリックして自分のサイトを更新すると、ユーザーがカウントされることが確認できます。

Google Search Consoleも設定しておく

Google Search ConsoleはGoogle検索でサイトがどう見えているかをチェックすることのできるサービスで、こちらも設定しておくと便利です。Ghostのサイトにも説明がありましたが、基本的に自分のドメインを入力してDNSレコードを修正するだけなので、5分もかからず設定できます。

Official Ghost + Search Console Integration
Keep on top of your site’s SEO performance by integrating Ghost with Google Search Console to monitor indexed pages, search impressions, clicks and more!

​以下のリンクからGoogle Search Consoleのページに行き、Start nowをクリックすると設定を開始できます。

Google Search Console

自分のサイトドメインを入力すると、DNSレコードに貼り付ける文字列が表示されるので、これをコピーして自分のドメインの該当するDNSレコードに貼り付けます。僕はTXTレコードにしました。1日程度待てばSearch Consoleでデータを確認できるようになるそうです。

おわり。

Read more

Ghostでコードブロックや画像を折りたたむ方法

Ghostでコードブロックや画像を折りたたむ方法

GhostのエディタではCardsという機能を使って記事本文中に様々な要素を埋め込むことができます。 Editor cardsJump to a card * Images * Markdown * HTML * Gallery * Divider * Bookmark * Email content * Email call to action * Public preview * Button * Callout * GIF * Toggle * Audio * Video * File * Product * Header * Embeds * Signup Card The Ghost editor includes rich media objects called Cards, which can be inserted into your content to add

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

以前Sourceテーマのファイルを編集して、タグ一覧のページを作りました。 Ghostブログにタグ一覧ページを作る (Sourceテーマの場合)記事を分類するのにタグをつけているのですが、いくらタグをつけたところで絞り込みに使えないのであれば何の意味もないですよね。 僕はSourceというGhostのデフォルトのテーマを使っているのですが、このテーマだと、それぞれのタグをそのままナビゲーションバーに設置することはできるんですが、ドロップダウンでタグを選んだり、タグの一覧を表示したりはすぐにはできないようです。 そこで今回は、Sourceテーマを使ってタグ一覧のページを作ってみましたという記事です。 Sourceテーマを使ってタグ絞り込みをしたいときにできること 上でも述べましたが、このテーマだと、ドロップダウンとか一覧ページはそのままだと出せません。 できるのは、それぞれのタグをナビゲーションバーに置くくらいです。 これは例えば、「ブログ」というタグをつけた記事があって、そのタグを持っている記事一覧を出せるようにしようと思ったら、ナビゲーションバーに「ブログ」という項目をわざわざ作ら

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

Three.jsを使って作られた3Dモデルをブログ記事の中にCode injectionを使って埋め込めるのかなとふと思ったので試してみました。 本文中でHTMLカードに<canvas>タグ、Code injectionのヘッダに<style>タグでCSSを、<script>タグでJavaScriptを貼り付けると、ちゃんと動かすことができました。 埋め込んだのはThree.jsのマニュアルにあった以下の例です。 three.js manual コードの中身は全く理解できていませんが、3Dって面白いですね。 Three.jsでは3Dモデルをインポートして使用することもできるようですが、以下のようなところから素材を使わせてもらうこともできるみたいですね。 OpenGameArt.orgというサイトで、ゲーム制作をしている人には有名なのかもしれませんが、僕は初めて知りました。 OpenGameArt.orgOpenGameArt.org 素材によってライセンス形態が異なるようですが、先日の記事で描いたCC0みたいなライセンスにしてある3D素材もあって、Three.j

Joseph Mallord William Turner "Mortlake Terrace", 1827 | Courtesy National Gallery of Art, Washington

部屋に飾る絵画とブログの画像

僕は特別アートに詳しいわけでもないですが、たまに絵を見たくなることもあります。 そういうとき、思い切って美術館に行くこともあるにはあるんですが、基本的に出不精なのでネットで調べて満足してしまうことが大半です。 ただやっぱり画面の中で見るのはその一瞬だけですし、なんだか味気ないってのも正直あります。 この記事は、そんなときはパブリックドメインになっている絵画データを印刷するとなんかいいよってことを伝えたくて書きました。 こういう自由に利用可能な素材はブログの画像なんかにも使えるのもいいですよね。この記事のトップにもパブリックドメインの絵画をお借りして載せてみました。 パブリックドメインってなんぞや 高画質な絵画データでもパブリックドメインで無償でダウンロード可能になってるものが結構あったりします。 パブリックドメインとは、誰でも自由に利用可能(商用利用含む)な素材です。 パブリックドメインになっている素材は大きく分けて、 1. 著作権が切れたもの 2. 著作者がパブリックドメインにしたもの(CC0と表記されている) の2種類があるようです。 💡僕は