Monthly Archives: 9月 2016

Piwikを導入してみました

Piwikを使ってみてと提案されたのでサイトに導入してみました。

Piwikとは?

Piwikは、現在世界中の個人、企業、政府機関が利用するオープン解析プラットホームだそうです。Googleアナリティクスのように使用することができ、自分が管理するサーバにインストールするため自分が管理するサーバにデータを保存することができます。

導入方法

以下が、私が行った手順です。途中でエラーが出る場合はこちらを参考にしてください。

  1. まず、こちらから最新版のPiwikをダウンロードします。
    FTPソフトでインストールするWebサーバーのドキュメントルート以下にサブフォルダを作成し、解凍したPiwikのファイルをアップロードします。また、Piwikで使用するデータベースのテーブルを作成しておきます。
  2. ウェブブラウザを開いて、Piwikを設置したURL を開きます。すると以下のような画面が表示されるので、次へを押します。
    ws000020
  3. 以下の画面が表示されるので、そのまま次へを押します。
    ws000021
  4. 以下のような画面が表示されるので、事前に作成しておいたデータベースのログイン名・パスワード・テーブル名を入力し、次へを押します。
    ws000022
  5. 以下の画面が表示されるので、次へを押します。
    ws000023
  6. 以下の画面が表示されるので、Piwikにログインするためのユーザ名とパスワード、メールアドレスを設定します。
    ws000024
  7. 以下の画面が表示されるので、Piwikで計測を行いたいウェブサイトの名前とURLなどの情報を入力し、次へを押します。
    ws000025
  8. Piwik用のトラッキングコードが生成されるので、計測を行いたいサイトの</head>の直前に生成されたコードを記述します。
    ws000026
  9. 以下の画面が表示され、設定は終了です。Piwikを続けるボタンを押すとPiwikのログイン画面に進みます。
    ws000027
  10. ログイン画面で、作成したPiwikのユーザ名とパスワードを入力してログインします。
    ws000028
  11. トラッキングコードが設定されていない場合、以下のような画面が表示されます。
    ws000029
  12. トラッキングコードを設定後、1度設定したウェブサイトにアクセスを行ってから再度Piwikの管理画面にアクセスすると以下のような画面が表示され解析が行われていることが確認できます。
    ws000030

設定を行ってみて

今回初めて設定を行ってみましたがWorfPressを導入するような感じで簡単に導入することができました。
リアルタイムマップという機能もありますが、最初は地域を特定できず不便かと思いましたが公式ページの手順を参考に少し触るだけでマップにアクセスされている地域を表示することができました。

ただ、データを自分のサーバに保存しているということは自分たちで使用することもできますが、不正アクセスされた場合も考えなければならなくなるとも思いました。

wordpressでプラグインを使わずにAMP対応をしてみました。

実際の対応の仕方についてはこちらを参考に行いました。

今回は置き換えた際に起こった問題を書いておきます。

特定のプラグインを有効にしておくと上手く対応できない

今回の場合、まず、「Jetpack by WordPress.com」を有効にしていた時に起きました。

これは、Jetpack by WordPress.comが画像を早く表示するために画像のパスが「Photon」のキャッシュになりますが、これが呼び出せないのか画像が表示されませんでした。

次に、「Lazy Load」です。これは、同時に「VK Post Author Display」を有効にしている場合に起きたのですが、VK Post Author Displayで表示されるはずの画像がLazy Loadを有効にしているとAMP対応のページで表示されなくなってしまいました。

記事中の画像がheight:100%になってしまう

こちらを参考にしてimgタグを置き換えたときに正常に表示されるページとそうでないページがでてきました。
調べてみた結果、今回AMP対応を行ったWordpressのfunctions.phpでimgタグの前後に自動的に付与されるpタグを削除する処理が入っていました。
どうやら、imgタグがpタグやaタグの中に入っていないとamp-imgタグに置き換えた際にamp-imgタグの終了が自動的に入らなくなっているようです。

実際に対応してみて

プラグインなしで対応をしてみましたが、このようになかなか気づかない問題が出てきてしまい、対応するのに苦労しました。AMPのプラグインを使用した場合このような問題は起きずにできるので、こだわりがなければプラグインを使用したほうがいいようです。

Google Analyticsについては

こちらの記事でプラグインを使用した場合のGoogle Analyticsの導入方法を記載しています。
Google Analyticsに関してはプラグインの有無は関係ないため、まったく同じなの方法で導入することができました。

GoogleSearchConsoleのAPIをPHPで使ってみた

GoogleSearchConsoleのAPIを利用してCSV出力できるようにやってみました。

必要なもの

  1. Googleアカウント
  2. phpが動作できる環境(PHPバージョン5.2.1以上)

API取得用アプリの準備

1.まず、はじめにGoogleアカウントにログインします。

2.次に、Google API Consoleでプロジェクトを作ります。

gap_project

 

 

3.ライブラリで「search」と検索して、Google Search Console をクリックし有効にします。 gap_01gap_02

 

 

 

4.承認情報のOAuth同意画面でサービス名等を適当に決めていきます。gap_03

 

 

5.承認情報→承認情報作成からOAuthクライアントIDを選択し作成しています。gap_04

 

 

 

6.ウェブアプリケーションを選び、名前、承認済みの JavaScript 生成元等適当に記入していきます。JavaScript 生成元は、実際にphpを実行するURLを指定します。gap_05

 

 

 

7.作成が完了すると、クライアントIDとクライアントシークレットが出てくるのでこれをメモします。

gap_06

 

 

 

8.その後、作成した承認情報のクライアントのjsonをダウンロードします。ファイル名は、client_secret.jsonでダウンロードしてください。gap_07

 

 

 

これでGoogle API Consoleの設定はとりあえず完了です。

 

 

ライブラリのダウンロード

次に、google-api-php-clientをダウンロードします。

これを利用することで先ほど作ったアプリと連携することができAPIの取得することができます。

ダウンロードは、git クローンコマンドかGithubにアクセスしてダウンロードできます。

git clone -b v1-master https://github.com/google/google-api-php-client.git

クローンコマンドで、ダウンロードした方もGithubにアクセスするとコードの参考になるかもしれません。

PHP

ここまでくればあとはphpの記述のみです。

oauth2callback.php

<?php
require_once(__DIR__.'/google-api-php-client/src/Google/autoload.php');
session_start();
$client = new Google_Client();
$client->setAuthConfigFile('client_secret.json');
$client->setRedirectUri('http://' . $_SERVER['HTTP_HOST'] . '/oauth2callback.php');
$client->addScope(Google_Service_Webmasters::WEBMASTERS_READONLY);
if (! isset($_GET['code'])) {
 $auth_url = $client->createAuthUrl();
 header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
} else {
 $client->authenticate($_GET['code']);
 $_SESSION['access_token'] = $client->getAccessToken();
 $redirect_uri = 'http://' . $_SERVER['HTTP_HOST'] . '/download.php';
 header('Location: ' . filter_var($redirect_uri, FILTER_SANITIZE_URL));
}
?>

初回起動時に、先ほど決めたサービス名のアプリと連携するか聞かれます。

同意すると連携されAPIとの接続ができるようになり、アクセストークンを取得することができます。

取得完了後、下記のdownload.phpにリダイレクトされます。

※アクセストークンは、有効期限があるようです。

 

download.php

<?php
require_once(__DIR__.'/google-api-php-client/src/Google/autoload.php');
session_start();
//期間は3日前から過去3ヶ月分まで
$start = 2016-06-04;
$end = 2016-09-04;
$url = "検索したいURL";
//検索したい件数
$limit = 5000;
$client = new Google_Client();
$client->addScope(Google_Service_Webmasters::WEBMASTERS_READONLY);
if ( isset($_SESSION['access_token']) && $_SESSION['access_token'] ) {
 $client->setAccessToken($_SESSION['access_token']);
 $client->setAccessType('offline');
 $client->setApprovalPrompt('force');
 $client->addScope(Google_Service_Webmasters::WEBMASTERS_READONLY); //権限の許容範囲("webmasters.readonly")
 $webmaster = new Google_Service_Webmasters( $client );
 $query = array();
 $query = new Google_Service_Webmasters_SearchAnalyticsQueryRequest;
 $query->setRowLimit($limit);
 $query->setDimensions(array('query'));
 $query->setStartDate($start);
 $query->setEndDate($end);
 $query->setSearchType('web');
 $resulets = array();
 $resulets = $webmaster->searchanalytics->query($url, $query);
 if ( !empty( $resulets) ) {
  $csv = array();
  foreach ( $resulets $key => $result ) {
   $columns = array(
    $key + 1,
    $result->keys[0],
    $result->clicks,
    $result->impressions,
    round( $result->ctr * 100, 2 ) . '%',
    round( $result->position, 1 )
   );
   array_push($csv,$columns);
  }
  if ( !empty( $csv ) ) {
   $list;
   $list = array_merge( array(array("順位","クエリ",”クリック数","表示回数","CTR","掲載順位")), $csv );
   $filename = date( "Y-m-d_H-i-s" ).'.csv';
   $filepath = 'download/'.$filename;
   $fp = fopen( $filepath, 'w' );
   // 配列をカンマ区切りにしてファイルに書き込み
   foreach ( $list as $fields ) {
    //文字コード変換
    mb_convert_variables( 'SJIS', 'UTF-8', $fields );
    //配列をCSV形式に出力
    //echo $fields;
    fputcsv( $fp, $fields );
   }
   fclose( $fp );
   //ダウンロードの指示
   header( 'Content-Type:application/octet-stream' );
   header( 'Content-Disposition:filename='.$filename ); //ダウンロードするファイル名
   header( 'Content-Length:' . filesize( $filepath ) ); //ファイルサイズを指定
   readfile( $filepath ); //ダウンロード
   unlink( $filepath );
  }else{
   echo "該当するデータがありません";
  }
 }else{
  echo "該当するデータがありません";
 }
}else{
 //トークンがない場合
 $redirect_uri = 'http://' . $_SERVER['HTTP_HOST'] . '/oauth2callback.php';
 header('Location: ' . filter_var($redirect_uri, FILTER_SANITIZE_URL));
}
?>

条件を指定してcsv形式でダウンロードすることができます。

実際には、条件の指定を別ページのfromタグからもってきたり条件の指定をもっと細かくできるようにしています。

ダウンロードが完了し、アプリとの連携を解除したい場合は、こちらからサービス名と同じやつを解除することでアプリとの連携が切れます。

 

参考

ほかにもいろいろと調べたサイトがありますがやはり一番参考になるのは、公式ですね。

 

AMPのページにアナリティクスを入れてみました

前回の記事でWordpressのプラグインでAMPを導入してみました。そこで、作ったからにはアクセス解析もできるようにしたいと思い、Googleアナリティクスを導入してみました。

導入

AMPは基本的に高速でページを表示させるため、基本的にjavascriptは実行されません。

また、今回使用しているWordpressのAMPプラグインjavascriptも省略されてしまうためこのままではアクセス解析ができません。

そこで、プラグインを編集してアクセス解析ができるようにします。

  1. AMPプラグインの中の amp/templates/single.phpのhead要素の中にこちらを入れます。
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  2. body要素の中にこちらのスクリプトを入れます。私は今回、bodyの直下に記述しました。
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
     "vars": {
     "account": "UA-XXXXX-Y"
     },
     "triggers": {
     "trackPageview": {
     "on": "visible",
     "request": "pageview"
     }
     }
    }
    </script>
    </amp-analytics>

    UA-XXXXX-Yの部分には、GoogleアナリティクスのトラッキングIDを記述してください。
    トラッキングIDはAMP用に別途用意したほうが良いようです。

確認

上記の設定が上手くいっていれば、googleアナリティクスのリアルタイム計測に表示されるようになるはずです。私は今回特定の記事が上手く取得できない状態になったのですが、新たに記事を追加したところ全ての記事で上手く取得できるようになりました。原因は分かっていませんがWordpress側のパーマリンクを保存し直したほうが良いかもしれません。

また、今回プラグインを直接編集しましたが、このプラグインは開発途中のためアップデートがあると思います。その際に今回の編集部分は上書きされて消えてしまうのでアップデート後は最後編集し直してください。

今回はこちら参考にさせていただきました。こちらにはイベントトラッキングの方法も記述されています。

 

AMPについて調べてみました

最近AMPという言葉を聞くようになりましたが、何のことだろうと思い調べてみました。

AMPとは?

「アンプ」と読みます。

Accelerated Mobile Pages (アクセラレイティッド・モバイル・ページ)の略称で、モバイル端末でのウェブページの表示を高速化するためのプロジェクトだそうです。

AMPを設定したページはGoogleでキャッシュに保存されてアクセスしたときに高速で表示されるようになります。

設定方法は?

WordperssPassを使っている場合はプラグインがあります。AMPプラグイン

WordperssPassの管理画面から導入する場合はプラグインの新規追加から「AMP」で検索をすれば検索結果の1番最初に表示されます。

この、AMPプラグインを有効化して、[設定]→[パーマリンク設定]へ進み、[変更を保存]ボタンを押してください。設定を変更する必要はありません。これを行わないと正常にAMP対応ページができないので注意です。

実際に作成されたAMP対応ページを表示する場合は、

投稿のURL/amp/

とするとAMP対応したページが表示されます。

WordperssPassのプラグインを使わずに設定する場合は、基本的にはそのままHTMLタグで作成しますが、imgタグやiframeタグはamp-imgタグやamp-iframeタグに置き換えないといけないようです。

また2016年9月2日現在ではformタグは対応していないので使用できないようです。

タグについてはここに詳しく書かれているので参考にしてください。

結局のところ

wordpressのプラグインを設定してみました。ページの読み込み自体は高速になったのでモバイルからアクセスされやすいものは導入しておいたほうが良いような気がします。

ただAMP自体が開発途中のため、今後どうなるか分かりません。そのため、焦って導入する必要はないと思いますが、wordpressを使っている場合は手軽に体験はできるので1度試してみてはいかがでしょうか。

PAK57_kangaeruookawashi_TP_V

アナリティクスを入れてみました。こちらに記載しています。