WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

○秘

ユニバーサルアナリティクスってどうなの?

カテゴリ:アクセス解析

2014年1月20日

昨年に正式リリースされた、グーグルアナリティクスの後継とされるユニバーサルアナリティクス。皆さんご存知でしょうか。

今回はそんなユニバーサルアナリティクスのメリットとデメリットをご紹介。


【メリット】

・クロスドメインの計測が可能

ユニバーサルアナリティクスでは、今までグーグルアナリティクスで不可能であったクロスドメインの計測をすることができます。

これは何かというと、ある人が、昼間にスマホで訪問→夕方アプリで訪問→夜にPCで訪問という流れを追うことができるんです。これはすごい。

グーグルアナリティクスでは、それぞれ別の訪問としてしか計測できなかったんですね。
このクロスドメイン計測が1番のメリットといえるでしょう。


・SNS計測が便利に

グーグルアナリティクスでSNS計測といえば、それぞれからの訪問数やPVなど通常のトラッキングで計測できる指標しか表示されませんでした。つまり、いいね!の数やツイートの数までみれなかった。

正確には専用のjsファイルを追加すればみれたのですが、少々手間がかかっていました。

これに対しユニバーサルアナリティクスではトラッキングコードに数行の追加を行えば、いいね!の数、ツイートの数などが、管理画面でみれちゃいます。以下その追加するコード(9〜20行目を追加)。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-Y(個別のID)', 'サイトURL');
  ga('send', 'pageview');

FB.Event.subscribe('edge.create', function(計測対象ページURL) {
  ga('send', 'facebook', 'like', 計測対象ページURL);
});

twttr.ready(function (twttr) {
  twttr.events.bind('click', function (e) {
    ga('send', 'social', 'twitter', 'click', '計測対象ページURL');
  });
  twttr.events.bind('tweet', function (e) {
    ga('send', 'social', 'twitter', 'tweet', '計測対象ページURL');
  });
});
</script>


【デメリット】

・情報がまだ少ない!

あえてユニバーサルアナリティクスのデメリットをあげるとするならば、その情報の少なさです。

アナリティクスの情報を探そうとすると、ほとんどのサイトがグーグルアナリティクスをベースにして解説をしています。
機能としては基本的には同じなのですが、管理画面に若干の違いもあったりするので、解説をみても戸惑ってしまうこともあります。


【オススメの方法】
上記のデメリットも考えると、オススメはグーグルアナリティクス、ユニバーサルアナリティクスどっちも導入しちゃうことです。

え、そんなこと可能なの?可能なんです。
ユニバーサルアナリティクスのトラッキングコードを入手したらグーグルアナリティクスの下にでも追加してください。
どちらも正常に計測できます。


まだまだユニバーサルアナリティクスについて情報が少ない中、どっちも導入しちゃうというのが1番堅実です。

これからwebコーディング.jpでも計測を進めていき、ユニバーサルアナリティクスの機能についてもっとたくさん発表できればと思います!

○秘

ページ内リンクをちょうどいい場所でストップ!

カテゴリ:コーディングTips

2013年12月27日

チーフコーダーのコーディングメモ、今年の更新も今回で最後です!!
そんなウェブコーディング.jpは12月28日〜1月5日までお休みを頂きます。

どうぞ、来年もよろしくお願い致します。


では早速やっていきましょう!
今回はページ内リンクについてです。

縦に長いサイトなどはページ内リンクを使用すると便利ですよね!
ちなみにページの一番下にいった時によく目にする「TOPに戻る」もページ内リンクの仲間です。


そんなページ内リンクですが、いざページ内リンクをクリックして、ページの天井にピッタリくっついて表示されてしまった!なんてことは一度は経験されているハズ・・・!

そんな時に、CSSをちょこっと書いてあげることで見やすくなります!
実際に再現してみましたので、下記よりお試し下さい。


※大きいディスプレイを使用している方は、ブラウザのウィンドウサイズを
小さくして閲覧して頂くとご確認頂けます。

また、表示を確認しやすくするために記事内に余白をとっております。



通常の表示:ここをクリック!

CSS追加後の表示:ここをクリック!











↑ ブラウザの天井にピッタリくっつきます。










↑ こちらには上部に余白をつけました!






















どのようになっているのかといいますと、
「リンク先に指定したID」に以下のCSSを付け加えてみましょう。


#link2 {
  padding-top: 20px;
  margin-top: -20px;
}



追加したpadding-top分をmargin-topで無くすことで、
リンクをクリックした時、上部に余白を持たせながら
レイアウトが崩れることなくページ内リンクのリンク先を調整することができます!


この方法でページ内リンクを使って、今までピタッとなっていた部分に余裕を持たせて上げることで、視認性も向上します!
小さなことでも見逃しません。

それがチーフです。

それでは来年も、、、
「チェェェーック!」

○秘

アナリティクスでコンバージョンを設定する(ECサイト編)

カテゴリ:アクセス解析

2013年12月12日

今回はグーグルアナリティクスの核である「コンバージョン」の設定を解説したいと思います。


そもそもコンバージョンって最初から計測されないの?とお思いの方もいらっしゃるのではないでしょうか。

天下のグーグルさんが提供している解析ツールなんだから、コンバージョンも勝手に計測できるてるでしょ!そんなふうに思ってた時期が私にもありました



・・はい、コンバージョンは自分で設定しなければ計測されません。

ということで今回はECサイトでの「商品の購入完了」をコンバージョンとし、その設定方法を解説します。

コンバージョンの設定と聞くとなんだか難しそうなイメージですが、わかってしまえばほんとに簡単です。
それでは設定のステップをご紹介。


① トップ右上にある「アナリティクス設定」をクリック


② ビューの中にある「目標」をクリック

③ 「目標作成」をクリック

④ 今回は購入をコンバージョンとするため、「商品購入」を選択

⑤ 目標の名前は「商品購入」にでもしておきます。タイプは目標を選択。

⑥ 購入完了ページのURLを入力します。例えば購入完了ページが「http://webcoding.jp/thankyou.html」の場合「/thankyou.html」だけを入力します。



これで設定は完了。わかってしまえば何てことなかったですね!
ちなみに実際の計測までは1日から2日程時間がかかります。


コンバージョンの設定により、商品を買った人がどういう経路でどのくらいの期間で購入に至ったかなど、他の解析データが輝きをみせてきます。

是非是非コンバージョンを設定してサイト改善を行っていってください。

○秘

HTMLが一瞬で見やすくなる置換術!

カテゴリ:コーディングTips

2013年11月28日

社内レクリエーションでブラックバス釣りに行きましたが、1匹も釣れず帰ってきました、チーフです。

そんな悔しい思い出を一瞬にして吹き飛ばす魔法の置換術を今回は皆さんに伝授したいと思います!


<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>あさのあいさつ</title>
</head>
<body>
	<h1>おはようございます</h1>
</body>
</html>

上記のようなコードを例に見ていくことにしましょう。

ファイルサイズを小さくするために、インデントやスペースをとった形にすることはよくありますよね。

<!DOCTYPE HTML><html lang="ja"><head><meta charset="UTF-8"><title>あさのあいさつ</title></head><body><h1>おはようございます</h1></body></html>


こんな感じです。

これをある程度見やすい形にするためには
テキストエディタに付いている「置換」を使用します。

今回はMacに標準で入っている
「テキストエディット」を用いて解説していきます。


編集 -> 検索 -> 検索と置換…
と進んでいただくか

command + option + F
のショートカットキーで置換を行うことができます。


検索ボックスの中に

><

を入力します。

そして検索ボックス下にあります
置換する文字列を指定するテキストボックスの中に

>
<

> と < の間に改行を入れた形にして「すべて」をクリックすると、、、


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あさのあいさつ</title>
</head>
<body>
<h1>おはようございます</h1>
</body>
</html>

上記の様な形になります!
これである程度どのような構造になっているか確認しやすくなりましたね。

さらにインデントを入れてあげることにより、更に可読性を上げることが出来ます。
皆さんも読みやすいキレイなコードを心がけて作業にとりかかりましょうね!

○秘

グーグルアナリティクスでバナーのクリック数を計測する3つのステップ。

カテゴリ:アクセス解析

2013年10月30日

どうもチーフです。
グーグルアナリティクスといえば、無料で高度なアクセス解析ができるツールとして有名ですね。
チーフも大変重宝しています。


しかし、欠点として初期設定だけでは欲しい情報が全て手に入らないということがあります。

例えばバナーがどれだけクリックされているのかなんて、、知りたいですよね??
これが初期設定では計測できていないんですよ。

ところがある方法を使うと計測が、できちゃうんです。
ということで今回はバナーのクリック数をアナリティクスで計測する方法をこっそり伝授しようかと思います。




■イベントトラッキング
さて、ネタばらしをするとバナーのクリック数を計測するためには、グーグルアナリティクスの拡張機能である、「イベント」という機能を使います。

手順としては、

①計測したいバナーのaタグにコードを追加。
②クリックがアナリティクスに反映されるまで待つ。(1日から2日)
③アナリティクスの「行動」→「イベント」からクリック数を確認。


という流れになります。



①計測したいバナーのaタグにコードを追加。
アナリティクスにデータを計測させるためのコードをaタグに仕掛けます。
追加するコードは以下。

onclick=”_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value, opt_noninteraction]);”


なんだか長くてややこしいですね。

カッコ内のうち必須項目になるのは、’_trackEvent’, ‘category’, ‘action’の3つです。
_trackEventはこのままでokで、categoryとactionは自由に名前を変えることができます。
この2つはアナリティクスでイベントをみるときの分類わけの項目になります。

例えば、今回はバナーのクリック数を調べるのが目的のため、
categoryには「banner」
actionには「click」
なんて名前がいいんんじゃないでしょうか。

‘opt_label’, opt_value, opt_noninteractionの3つはオプションになるので、省略してもok。
このうち、’opt_label’は、’category’, ‘action’と同じく、アナリティクスでみたときの分類わけの項目になります。
※分類わけの項目というのが引っ掛かるかと思いますが、③の説明でわかるようになります。



例えば、クリック数を調べたいバナーが複数ある場合は、この’opt_label’に、
「banner01」「banner02」と入力をしていくとバナー毎に分類が可能になります。


では今回は「クリック数を調べたいバナーが2つある」として、追加するコードをみてみましょう。

1つ目
onclick=”_gaq.push(['_trackEvent', 'banner', 'click', 'banner01']);”

2つ目
onclick=”_gaq.push(['_trackEvent', 'banner', 'click', 'banner02']);”

これらをaタグに追加した実際のコードは、

<a onclick="_gaq.push(['_trackEvent', 'banner', 'click', 'banner01']);" href="バナー1のリンク先">バナー1のimg</a>
<a onclick="_gaq.push(['_trackEvent', 'banner', 'click', 'banner02']);" href="バナー2のリンク先">バナー2のimg</a>
となります。

以上でaタグに仕掛けるコードの説明は終わりです。


②クリックがアナリティクスに反映されるまで待つ。(1日から2日)
コードを追加してからアナリティクスで実際に記録されるまで、おおよそ1日〜2日程度の時間がかかります。
これ以上たっても計測されないようでしたら、コードに間違えがあるかもしれないので確認をしてみてください。


③アナリティクスの「行動」→「イベント」からクリック数を確認。
さあようやくクリック数の確認です。
まずアナリティクスの「行動」→「イベント」→「サマリー」へ。ここでイベントの一覧がみれます。
「行動」→「イベント」→「サマリー」

ここから進み、「上位のイベント」という箇所の「イベントカテゴリ・イベントアクション・イベントラベル」に注目。
「行動」→「イベント」→「サマリー」
そうです、ここで①で追加したコードの’category’, ‘action’, ‘opt_label’が紐付いているわけですね。

‘category’はイベントカテゴリ
‘action’はイベントアクション
‘opt_label’はイベントラベル

それぞれの分類からデータをみることができます。


さてさて、今回は2つのバナーのクリック数でしたからイベントラベルの中をみます。
すると、banner01とbanner02の項目があり、計測されていることが確認できるかと思います。

「行動」→「イベント」→「サマリー」

ここの、「合計イベント数」というのがクリック数になります。
これで晴れてバナーのクリック数を計測することができました!


ちなみにイベントトラッキングは、外部リンクでも内部リンクでも計測可能です。

また、同じ方法でpdfのダウンロード数や、動画の再生数などもイベントとして、計測をすることができます。とても画期的!




■追加するタグも間違えなく入れたはずなのに、計測されないのですが。。

という方は、もしかすると導入しているツールがグーグルアナリティクスではなく、ユニバーサルアナリティクスの可能性があります。
ユニバーサルアナリティクスとは2013年3月に公開されたグーグルアナリティクスの後継バージョンのことです。


ユニバーサルアナリティクスの場合、追加するコードが以下に変わります。

onclick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘opt_label’);”

‘category’, ‘action’, ‘opt_label’を同じルールで変えてaタグに追加すれば、
計測が開始されます。





・・・いかがでしたでしょうか。
ちょっと面倒かもしれませんが、バナーのクリック数が計測できるようになると、バナーの適切配置など、サイト改善に役立つはずです。

是非ともトライしてみてください!

○秘

text-indentが効かない?!

カテゴリ:コーディングTips

2013年9月11日

どうもチーフです。

最近は新入社員の教育に力を入れており、
更新が滞っておりました。


新入社員の教育をしていると、コーディングを始めたばかりの頃につまづいていた箇所を思い返すものです。

今回はそんな、初心者がはまりがちな穴の一角をご紹介。


「text-indentが効かない?!」
text-indentといえば、文章の段落の1行目のインデント幅を
指定する際に用いるcssプロパティの1つです。

そんなtext-indentを用いたテクニックの1つ
「text-indent: -9999px;」
を使って、テキストを飛ばして画像を置換する方法ですが、これには思わぬ穴が。


「text-indent: -9999px;」を指定している親要素に「text-align: right;」が指定されている場合、テキストが飛んでいってくれないんですね。

いくら飛んでいこうとしても親の「右に寄りなさい!」という命令には逆らえないわけです。親のいうことは絶対。


実際にtext-indentを指定しているのは子要素ですが、
親要素が原因というと、少し気づきにくいところでした。

ということで、「text-indent: -9999px」が効かないときは、まずは親要素を確認してみてください。

○秘

【WordPress】タグクラウドに投稿数を表示する方法

カテゴリ:Wordpress

2012年7月19日

タグクラウドを表示するwp_tag_cloud()はとっても便利ですね。そのタグがついた投稿数が多いとフォントサイズを大きく表示してくれるパラメータなんかもあります。しかし肝心(?)の投稿数を表示してくれない。
カテゴリみたいに「カテゴリ(13)」っていう表示がしたいよ〜!と調べたところ解決方法が見つからなかったのですが、ヒントを得つつなんとか解決しました。
バージョンは3.3.2ですが3.4.1でもいけます。


/wp-includes/category-template.php内の

. "$unit;'>$tag_name</a>";

これを、

. "$unit;'>$tag_name</a>(".($real_count).")";

こうするだけ。


このブログもwordpressで作っていますが、そろそろリニューアルしたいチーフでした。

○秘

ウェブコーディング.jpのスマートフォン版をリリースしました

カテゴリ:お知らせ

2012年5月1日

どうも、チーフです。

ウェブコーディング.jpもやっとスマートフォン対応しました!



トップページが!
トップページが!


下階層も!
下階層も!


ブログページも!
ブログページも!

お手持ちのスマートフォンから、ウェブコーディング.jpにぜひアクセスしてみてくださいね。

○秘

【WordPressプラグイン】SyntaxHighlighter Evolvedを導入してみた(&うまく動作しない時の対処法)

カテゴリ:Wordpress プラグイン

2012年3月8日

ブログ記事内のソースコードを見やすく!SyntaxHighlighter Evolved

ソースコードをブログで紹介するのに、直書きだと見づらいので
SyntaxHighlighter Evolvedを当ブログでもやっと導入してみました。

導入手順
1.SyntaxHighlighter Evolvedをダウンロード
2.ダウンロードしたzipを解凍し、
 プラグインフォルダにそのままアップロード
3.プラグインを有効化する
4.投稿画面で、ソースコードを表示したい箇所に
 [○○○]ソースコード[/○○○]と記入。
(◯◯◯は言語名。html,php,cssなど)

表示例:

<p>ね、簡単でしょ?<br>
こんな感じでソースコードが非常に見やすく表示できます。</p>
以上で完了です。
◯◯◯内に記述できる言語は以下のとおり。

言語 []内への記述
ActionScript3 as3, actionscript3
Bash/shell bash, shell
C# c-sharp, csharp
C++ cpp, c
CSS css
Delphi delphi, pas, pascal
Diff diff, patch
Groovy groovy
JavaScript js, jscript, javascript
Java java
JavaFX jfx, javafx
Perl perl, pl
PHP php
Plain Text plain, text
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html, xhtml


余談:プラグインがうまく動作しない時は


あれ?


こうじゃないの?

なぜかうまくプラグインが効かないというトラブル発生。調べたところ、対処法を発見。

header.php内のhead内に以下を記述
<?php wp_head(); ?>

footer.php内に以下を記述(</body>のすぐ上がオススメ)
<?php wp_footer(); ?>

フロントページに影響するプラグインの場合、これらを記述しないと動作しないプラグインがあるようです。
オリジナルでWordpressテンプレートを作成する人は要注意ですね!

○秘

料金改定のお知らせ

カテゴリ:お知らせ

2012年3月5日

平素はWebcoding.jpに格別のご愛顧を賜り誠にありがとうございます。

Webcoding.jpはこれまで適正価格として相場よりかなり抑えた価格でサービスを提供してまいりました。

「時代に見合う高品質」なサービスを提供するために、このたび2012年3月5日付けで料金の改訂を実施しました。

価格について詳細はこちらを御覧ください。

他より少しだけ高めの料金設定をしています。
しかし、Webocoding.jpなら料金に見合う「信頼」と「実績」で、お客様を満足させられます。

Webcoding.jpなら…
【安心の「コーディング技術」ツボ押さえてます】
Web標準に準拠したXHTML+CSSコーディングに完全対応しております。正しいマークアップは、ブラウザによる表示差異や、アクセシビリティの改善だけでなく、検索エンジン対策にも繋がります。

【確実なスケジュール管理は事故を防ぎます】
やりとりが時系列で追えるBacklog(バックログ)を使うことで、スマートなやりとりを実現。「言った」「言わない」が無く、見逃しもありません。

【HTML5・スマートフォンも対応】
スマートフォン対応やHTML5への移行などすさまじい速さで進化を続けるWEB制作業界ですが、迅速・柔軟に対応できます。

サービス概要について詳しくはこちらを御覧ください。

Webcoding.jpは今後も技術の発達やお客様満足度を高められますよう精一杯努めてまいりますので、引き続き変わらぬご愛顧を賜りますようお願い申し上げます。

123

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ