WordPress Popular Postsでクリック数をGAで計測する:メモ

Cat WEBサイト構築Tag by cubismer
悩み
悩み

バッドノウハウかもシリーズで、とりあえずできたのでメモ。

ナビゲーションは色々とありますが、どこにどれを設置したら効果があるのかは調べてみないとわかりません。

そのため、WordPress Popular Postsの計測をしたいと考え、色々やり方を探っていました。奇麗にできているわけではありませんのであしからず。

[2015.9.17 追記　「iOS9でリンクが作動しない」の項目を追加]

実現したいこと

冒頭で触れていますが、以下の実現を目指していました。

  • WordPress Popular PostsのクリックをGoogle Analytics計測
  • iPhoneなどでもなるべく正確に計測

「iPhoneなどでもなるべく正確に計測」という部分は以前記事にしていますので、そちらをご覧下さい。

今回は、この記事にある下記のコードをWordPress Popular Postsに入れ込むことを目的にしています。
なお、イベントカテゴリは「nav_wpp」に変更していますがこのあたりは適当です。


onclick="var href = this.href; ga('send','event','nav_wpp','click', this.href, {'hitCallback': function(){document.location = href;}}); return false;"

対応方法

結論としては、functions.phpに以下の記述をしました。


function my_custom_single_popular_post( $post_html, $p, $instance ){
  $output = '<li><a onclick="var href = this.href; ga(\'send\',\'event\',\'nav_wpp\',\'click\', this.href, {\'hitCallback\': function(){document.location = href;}}); return false;" href="' . get_the_permalink($p->id) . '" class="my-custom-title-class" title="' . esc_attr($p->title) . '">' . $p->title . '</a> <span class="wpp-views">'. $p->pageviews.'views</span></li>';
    return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );

上記のカスタムは、下記のサイトを参考にしています。

iOS9でリンクが作動しない[2015.9.17追記]

iOS9で確認したところ、この記事で用いてるonClickを使うとリンクが動作していないことがわかりました。もしかしたらiOS8.3.1の時点でそうだったのかもしれません。

動作としては、長押しすると出てくる項目で推移は可能ですが、リンクにタッチしただけでは画面が推移しません。

さすがにリンクが飛ばないのは問題なので、現状ではあまりおすすめできない方法になりました…。

結び

onclickを変数に入れるのと、閲覧数の表示方法で時間をくいました。
onclickはエスケープすればいいだけでしたし、閲覧数は$pとpageviewsを理解していれば良かっただけでした…。

補足

WordPress Popular Postsをテンプレートに入れる際、以下のような専用の関数が用意されています。


<?php wpp_get_mostpopular(); ?>

使い方の詳細はGitHubの以下のページで調べられるかと思います。

  1. Home · cabrerahector/wordpress-popular-posts Wiki · GitHub

管理画面内のプラグインの設定画面にある「Parameters」にはこの関数で使えるカスタム方法が載っており、functions.phpに書かない方法もあります。
表示数の変更でしたら以下の通りです。表示数や並び順、サムネイルのサイズなどちょっとした変更でしたらこちらの方がらくだと思います。


//20件表示
<?php wpp_get_mostpopular( 'limit=20' ); ?>

他にも出力される要素自体をレイアウトを含めて調整するためのパラメーターが用意されていますので、管理のSettingから一部を引用します。

  • {thumb}
    (displays thumbnail linked to post/page)
  • {thumb_img}
    (displays thumbnail image without linking to post/page)
  • {title}
    (displays linked post/page title)
  • {summary}
    (displays post/page excerpt, and requires excerpt_length to be greater than 0)
  • {stats}
    (displays the default stats tags)
  • {rating}
    (displays post/page current rating, requires WP-PostRatings installed and enabled)
  • {score}
    (displays post/page current rating as an integer, requires WP-PostRatings installed and enabled)
  • {url}
    (outputs the URL of the post/page)
  • {text_title}
    (displays post/page title, no link)
  • {author}
    (displays linked author name, requires stats_author=1)
  • {category}
    (displays linked category name, requires stats_category=1)
  • {views}
    (displays views count only, no text)
  • {comments}
    (displays comments count only, no text, requires stats_comments=1)
  • {date}
    (displays post/page date, requires stats_date=1)

デフォルトは以下の通り。


<li>{thumb} {title} {stats}</li>

上記のパラメーターを使う一例として、以下のカスタム例も挙げられています。


<?php wpp_get_mostpopular( 'post_html="<li>{thumb} <a href=\'{url}\'>{text_title}</a></li>"' ); ?>

上記でしたら、「サムネイルがあり、次にaタグに囲まれたタイトルがあり、閲覧数はなし」となるはずです。
他にもいろいろ書かれていますので、このプラグインに関しては管理画面で多くの情報が手に入るかと思います。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄