無料ヒートマップ解析ツール「User Heat」を導入しよう

ホームページのコンバージョン率が悪いときなど
「どの部分をを改善すればいいのか分からない」
という場合ではないでしょうか。
そんな悩みを解決するのがヒートマップツール。
これを導入すれば、訪問者の閲覧行動が手に取るように分かります。

今回は無料で使える「User Heat」の設置方法を紹介します。

まず設置したいサイトのURLを登録します。

20170221_01

すると新規登録のフォームページに移りますので
内容を登録してください。

内容を登録すると
ログイン画面に切り替わりますので、
ログインしHTMLタグ発行ページにある
スクリプトをサイトのタグ直前に取得したタグを設置し完了です。

20170221_02

20170221_03

これでWebサイトの改善箇所がわかりやすくなり
より効率的に修正を行うことができます。

Googleアナリティクスとも連携できるのでおすすめですが、
無料版だと長いページは途中までしか表示してくれませんので
注意してください。

User Heatはこちら

Googleアナリティクスのイベントトラッキング設置

Googleアナリティクスでバナーのクリックや電話番号のタップなどの計測したいときは、
イベントトラッキングを使用します。

まず下記のイベントトラッキングのコードを計測したい
リンクなどに設置します。

 <a href=”http://sample.com” onClick=”ga(‘send’,’event’,’カテゴリー’,’アクション’,’ラベル’,値,{‘nonInteraction’:1});”>任意のリンク</a>
例:ga(‘send’,’event’,’link’,’click’,’event_click’,100,{‘nonInteraction’:1});

onClick=”ga(‘send’,’event’は定型文です。
それでは、それぞれに入る要素について説明していきます。

1.カテゴリー(必須)
計測したい行動をカテゴリ分けするために付ける名前です。
任意の名前をつけます。

2.アクション(必須)
ユーザーの行動に付ける名前です。
にclickとかdownloadなど任意の名前をつけてください。

3.ラベル(省略可)
アクションの詳細です。任意の名前をつけてください。

4.値(省略可)
イベントに関する価値数字でを指定します。
例えば1クリック100円なら100と指定します。

5.{‘nonInteraction’:1}(省略可)
直帰率に影響しないという定型文です。
1を0にすると、直帰率に影響しないようにできます。

以上の設定をしたら
アナリティクスで目標設定します。
20161227

画像のカテゴリ、アクションに設定した任意の名前を入力して完了です。

以上でイベントトラッキング設置終了です。
これでバナーのクリックや電話番号のタップなどの計測が
Googleアナリティクスで、できるようになります。

phpでExcelを読み込む

web制作などしていない限りcsvと言われるよりExcelの方が馴染みがあり、
伝わりやすので毎回Excelファイルをわざわざcsvに保存し直し使用していましたが、
面倒なので、phpでExcelファイルを直接読み込むます。

まず、PHP-ExcelRaderというライブラリーをダウンロードします。

そしてその中のExcelというフォルダを適当なディレクトリに入れてください。

あとは以下のようにライブラリーを読み込み、オブジェクトをつくり
エンコードを指定したらExcelを読みめます。

<?php 

require_once 'bin/Excel/reader.php';//ライブラリーを読み込み

$excel = new Spreadsheet_Excel_Reader();//オブジェクトをつくる

$excel->setUTFEncoder('mb');
$excel->setOutputEncoding('UTF-8');//エンコード指定

$excel->read('/img/eria/csv/kk_24.xls');//Excelの読み込み

$data = $excel->sheets[0];//何番目のシート(Excelのシート)

?>

以上のExcelファイルをcsvファイルのように配列で取り出せます。

カテゴリー: php

sassで@eachろう

Sassの@eachを使えば同じレイアウトのスタイルで、
一部の色を変えたいなど、いちいちcssを書くのがめんどくさい
ときに便利です。

まずHTML

<ul id="list">
<li class="nav_home"><a href="#">HOME</a></li>
<li class="nav_about"><a href="#">ABOUT</a></li>
</ul>

そしてsass

//色の変数を用意
$red: #800;
$blue: #33bad2;

//色の配列をつくります
$colors: $red, $blue;

//カテゴリーの配列をつくります
$navList:home, about;

#list li{
  //$navNameが$nameList分処理が行う
  @each $navName in $navList{

    //クラス用のインデックスの設定
    $indexKey: index($navList,$navName);
     
    //$colorsが$indexKey分回る数を設定
    $colorLists: nth($colors,$indexKey);

    &.nav_#{$navName}{
      a{
        color:$colorLists;
      }
    }
}

上記のように少し複雑かもしれないのですが、
何個も同じようなCSSを書くのはモヤッとする方にはおススメです。

カテゴリー: css

「wordpressでのサイト構築」覚え書き-カスタム投稿をカテゴリー、アーカイブに表示-

カスタム投稿タイプの記事をカテゴリー、アーカイブに表示させるには
個別のテーマファイルを作成すと簡単です。

archive-タクソノミー名.phpと言うファイルを作成して
以下のようにループを書けば表示できます。
※<nav></nav>の部分はページャーで使用するには前々回のfunctions.phpに関数を追加する必要があります。

<?php
global $wp_query;
$args = array_merge(
$wp_query->query,
array(
'posts_per_page' => 1
)
);
query_posts( $args );
if (have_posts()) :while (have_posts()) :
the_post();
?>

<?php the_title(); ?>

<?php endwhile; ?>


<nav class="post_list_nav clearfix">
<?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);} ?>
</nav>

<?php wp_reset_query(); endif; ?>