【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

22Mar2012

[WordPress] PC用・スマホ用・携帯用analyticsの設置方法

WordPressを使っている人の多くはアクセス解析にGoogle Analyticsを使っていると思います。
WordPressではテーマごとにanalyticsのタグを設置する必要がありty’s empty f’log では3回ほどテーマを替えていますが、僕はなぜか100%の確率でタグの設置を忘れてしまいます。

仕事でWordPressサイト作る際などはリリース直前にスタッフに

「今度はanalytics忘れてないよね?」

「大丈夫。(←当然忘れてる)」

と念を押されるのでセーフ(!?)ですが、
ty’s empty f’logは僕以外管理している人がいない為、発覚するのに1週間ほどかかります^^;

アホ自慢はこの辺にしておき、今回はanalyticsの追跡タグ設置方法をご紹介します。

WordPressへのanalyticsタグ設置は【Ultimate GA】などのプラグインで対応していますが、携帯サイトには非対応です。僕は気分的にも手動で設置したいのでphpファイルに手書きで設置しています。

プラグインを使いたい場合は以下のリンクなどをご参考に^^

WordPressに簡単アクセク解析導入プラグイン『Ultimate Google Analytics』
WordPress の Ultimate Google Analytics プラグイン
グーグルアナリティクスの設置

また人気プラグイン「All in One SEO」も最新バージョンからanalyticsの設置機能が追加されました。
この機能を使うと、PC用サイトの他にWPtouchで生成したスマホサイトにも自動で設置されます。

All in One SEOについてはこちらの記事でご紹介しています。

[WordPress] 定番プラグインall in one SEOの効果的な使い方

携帯サイトにも設置したい! プラグインを増やしたら重くなる!
という志の高い方は、これよりスタートする本編をご参考に設置にチャレンジしてください^^

※今回の作業ではWordPressテーマのphpファイルを手動で変更します。作業自体は簡単ですがFTPソフトでサーバーへアクセスできない環境の方はphpファイルを変更しないで下さい。

1. WordPress+Analytics for PC・スマホ・携帯サイト

まずはそれぞれの下準備をします。

1.1. WordPressのサイトを作る

この記事にたどり着いたのにWordPressを使ったことがない!?

そんな方には以下のリンクをオススメします。

WordPress-wikipedis  (まずはここで何たるかを勉強)
WordPress日本語公式 (安心・安全の公式ページ)
WordPressの長所と短所 (web屋さんが「導入が難しくて初心者には無理」と不安を煽っています)

1.2. Analyticsのアカウントを取得する

Googleアカウントを持っている人なら、誰でもAnalyticsを使えます。
まずはアクセス!

Google Analytics

analyticsやSEOについては、相当古い記事もありますが当サイトのSEOカテゴリーをどうぞ。

アクセス解析・SEO カテゴリ内の記事一覧 (ty’s empty f’log)

1.3. WordPressでスマートフォン・携帯サイト表示プラグインを導入する

スマートフォン表示プラグインのオススメは
WP-touch (WordPress公式)

携帯表示プラグインは
Ktai-style (WordPress公式) 

どちらもWordPress管理画面の”プラグイン”から検索すると出てきます。

2. WordPressで手動でanalyticsタグを設置する際に注意するポイント

以下は自分の失敗経験を踏まえてた注意点です。

・テーマを新しくする際は必ずanalyticsタグを設置する
・スマホor携帯表示用プラグインを導入する際もanalyticsタグを設置する
・スマホor携帯表示用プラグインを更新する際もanalyticsタグを設置する

携帯表示用プラグインはホントに危険で設置忘れに気づかないまま数カ月経ってたりします(;O;)
ちなみに今も携帯サイト調べてみたら、analyticsタグは外れていました・・・
analyticsで携帯アクセスが0になっていたから実はうすうす気づいていたんだけどね。

3. 通常(PC用)サイトへの設置方法

3.1. トラッキングコードの取得

analytics管理画面のトップ(プロファイルのリスト)から、プロファイルの編集をクリック→ステータスの確認などで以下の画面を表示させます。

WordPressへのanalyticsタグの設置方法

表示されたトラッキングコードを説明の通り全ページの</head>タグ直前に埋め込めばいいわけです。

3.2. WordPressで全ページの</head>タグ直前を書き換えるには?

WordPressでは決められたルールに従って各テーマは作られています。

簡単に言うと「ヘッダ部分のテンプレート」「メインインデックスのテンプレート」「個別記事のテンプレート」「フッタ部分のテンプレート」などで作られています。

今回必要な</head>タグの部分はheader.phpというファイルで管理しています。

3.3. 管理画面からheader.phpを書き換える

WordPressへのanalyticsタグの埋込み

WordPressの管理画面にログインをしたら、左のメニューから「外観」「テーマ編集」のページに入ります。

右にテンプレートファイルがリストされますので「ヘッダー(header.php)」を押して編集画面に入ります。

表示されたコードの中からというタグを見つけてください。(Ctrl+Fを使うもよし)

</head>は一回しか登場しませんので安心してください!

さきほどanalyticsの管理画面で表示したスクリプトを</head>の前に貼りつけたら「ファイルを更新」を押して完了です。

3.4. FTPソフトを使う場合

WordPressを使っている人の多くはFTPソフトを使える人だと思います。

FTPの知識が多少ある場合は、ブラウザから操作するWordPressの管理画面よりもFTPソフトを使った方が簡単ですよね^^

テーマテンプレートの場所は

/wp-content/themes/お使いのテーマ/header.php

です。

4. WPtouch(スマホ用)への設置方法

4.1. WPtouchテーマの編集方法

PC用テーマはWordPressの管理画面から編集ができましたが、WPtouchのテーマは管理画面から編集をすることができません。

ですので普段使っているFTPソフトから編集をする必要があります。

大丈夫!WordPressを設置するスキルがあるアナタなら簡単です!

4.2. WPtouch テーマテンプレートの場所

/wp-contet/plugins/wptouch/themes/core/core-header.php

を開き、</head>直前にanalyticsタグを設置して下さい。

※このファイルはプラグイン更新時に上書きされますのでご注意ください。

最新バージョンのWPtouchでは、analyticsタグ設置に対応しています。

[設定 – WPtouch] から 「Stats & カスタムコード」の覧でanalyticsのプロパティIDを入力すればOKです。

※トラッキングコードではなく各プロパティ毎に生成される「UA-○○○」形式のプロパティIDです。

5. Ktai Style(携帯用)への設置方法

5.1. 携帯用サイト専用のトラッキングコード

携帯用サイトのanalyticsタグは今までと全く手順が違います。

まずanalyticsのトラッキングコードを表示する画面まで戻ります。

次に「1,何をトラッキングしますか?」の項目で「携帯電話向けのサイト」を選択します。

すると以下のような画面に変わります。

WordPress Ktai-Style(携帯サイト) へのanalyticsタグの設置方法

5.2. 上段のスクリプトを埋め込む

上段のスクリプトは、全ての携帯用ページの<html>タグ直前に設置します。

Ktai Styleで<html>を管理するテンプレートファイルは以下にあります。

/wp-contet/plugins/ktai-style/themes/使っているテーマ(通常はdefault)/header.php

このファイルを開いたら<html>タグの直前にanalyticsタグを設置して下さい。

5.3. 2番目のスクリプトを埋め込む

2番目のスクリプトは、全ページの</body>直前に設置します。

今までと同じ要領で以下のファイルに設置します。

/wp-contet/plugins/ktai-style/themes/使っているテーマ(通常はdefault)/footer.php

※僕自身では未確認ですが、こちらもWPtouch同様プラグイン更新時に上書きされるはずですのでご注意ください。

5.4. 謎の重要ファイルをアップする

最後に「3,ファイルをルート ディレクトリにコピーします」の項目の「ga.php」をクリックしてダウンロードし、wordpressの設置してあるサーバーのルートディレクトリにアップロードします。

レンタルサーバーでは

○○○.com/public_html/
○○○.com/www/

などがルートディレクトリになります。

【ルートディレクトリに置きたくない場合は】

任意の場所にga.phpを設置した後、head内に設置したトラッキングコードの以下の部分を正しいパスに変更して下さい。

$GA_PIXEL = "/ga.php";

携帯版analyticsの設置については、こちらの記事が詳しいですので、僕の説明で上手くいかなかった人は参考にしてください。
携帯版Google Analytics設置でよくあるつまづき5つ (カグア)

6. analyticsで動作チェックをする

これでPC用・スマホ用・携帯用サイトへのanalyticsタグの設置が終わりました。

1日ほど待ってから、きちんと計測されているかを調べましょう!

ユーザー>PC環境>ブラウザとOS でチェック

analytics スマートフォンのトラフィックを確認

analyticsの管理画面から「ユーザー」「オペレーティングシステム」を表示させます。

iphoneやandroidからのアクセスがある事が確認できたら、WP Touchに設置したタグは正常に動作している、という事になります。

また[ ユーザー – モバイル – デバイス ]では、機種名まで確認できます。

関連記事