未対応のTumblrテーマでGoogle Analyticsを使えるようにする #GoogleAnalytics

トラッキングIDも作ったしTumblrのブログに埋め込んでアクセス統計!と思ったら、テーマが対応してなくてトラッキングIDの入力欄がないの…、という時の対処法。

お題 : Google Analyticsに対応していないテーマを使ったTumblrブログにトラッキングIDを入力できるようにする

解決法の概略は、

テーマファイルにGoogle Analytics用のタグが埋め込まれていると自動的にテーマ編集画面にトラッキングID入力欄ができるので、テーマファイルを編集すればOK

です。

編集画面を出す

ダッシュボードでブログを選択したら「外観の編集」を選択
「サイトのテーマ」の「テーマの編集」ボタンを選択

でテーマ編集画面になります。ここで、「テーマオプション」に「Google Analytics ID」があればトラッキングIDを入力して保存して終了しておしまい、なのですが、ない場合はテーマのHTMLファイルをGoogle Analytics対応に書き換えます。

テーマのHTMLファイルの書き換え

以下の二カ所にコードを追加します。

<head>〜</head>内に以下のmetaタグを追加。

<meta name="text:Google Analytics ID" content=""/>

次に<body>〜</body>内(通常末尾でしょう)に以下のmetaタグを追加。

{block:IfGoogleAnalyticsID}
  <script>
    var _gaq=[['_setAccount','{text:Google Analytics ID}'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
{/block:IfGoogleAnalyticsID}

「プレビューの更新」を選択するとプレビュー画面が更新されて「保存」ボタンがあらわれるので選択して前画面に戻ります。

以上で、テーマオプションに「Google Analytics ID」が現われるのでトラッキングIDを入力して保存して終了しておしまい。

まあ、テーマにしないならテーマのHTMLファイルに直接トラッキングIDを書き込んだっていいわけですが、テーマがどうできてるかをわかるためにも、という意味で。

テーマオプション、Googleについて

さて、上記で何が起こるかなのだが、まず、<head>〜</head>内にcontent=""(空文字列)になってるmetaタグがあると、そのnameに対応したテーマオプションが表示されるようになり、{text:Google Analytics ID}のようにnameを中カッコで括って書いてやるとそこに設定値が代入されるらしい。この機能を使って独自のtextを定義すればいろいろテーマに可変の値を埋め込むことができる。

だが謎なのは、{block:IfGoogleAnalyticsID}〜{/block:IfGoogleAnalyticsID}である。なにを以ってこのブロックを挿入するか否かが決まるのか、現時点で謎。

ちなみにTumblrのHelpで「カスタムHTMLテーマを作成する」というページがあって、テーマオプションについては、ここ、Google Analyticsへの対応方法についてはここに説明がある。

いつの間にか日本語に訳されていて読みやすいのだが、どうも記述が少なくなってて、上記のタグの説明とかはない。英語のときにはなんとなくあったような気がしていたのだけど英語版のページの行き方がわからず、未確認。

TumblrとGoogle Analyticsエトセトラ

せっかくトラッキングIDを設定しても、デフォルトのモバイルテーマを使う設定になっているとモバイルアクセスがAnalyticsから洩れるらしい。これは無効にしておく。