ダミー

【急いでいる人向け】Googleアナリティクスのイベントとキャンペーン

当記事はGoogleアナリティクスについて一通りの知識がある急いでいる人向けに書いています。つまり、Googleアナリティクスの基本的な実装方法や、使い方は書いていません。

ところで「急いでいる人」って一体誰?という疑問ですが、大抵の場合は自分です(笑)
それでも「あー、Googleアナリティクスはずっと使っていて、イベントトラッキングの実装も何度もしてるけど、毎日はしないから、えーっとどうするんだったっけ?…」ってなってる人、そしてサイト内の行動をトラッキングする「イベント」と、Web以外からの流入をトラッキングする「キャンペーン」が一つのページにまとまってたらいいのに、と常々思っている人は参考にしてください。

イベント・トラッキング

イベントトラッキングの基本的なコードは

onClick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', true);"

カテゴリ、アクション、ラベルは任意に設定できます。ラベルはイベント個別のユニークな文字列にするのであまり問題にはなりませんが、グダグダになりがちなのはカテゴリとラベルです。

カテゴリ=何を(対象)、アクション=どうする(行為)と考えるとわかりやすいです。
例えば
「ボタン」を「クリックする」なら、カテゴリ’button’、アクション’click’
「PDF」を「ダウンロードする」なら、カテゴリ’pdf’、アクション’download’
といった具合です。
そして、ラベルはボタンやPDFの名前です。たいていは日本語にしています。

これを、aやinputタグに付けます。

<a href="hoge.pdf" onClick="ga('send', 'event', 'banner', 'click', 'おすすめ', true);">

キャンペーン―Web以外のメディアからの流入を計測

Webサイトからやってきたユーザーは、検索(organic)や外部サイト(referral)から来たことがわかりますが、印刷物やメールに貼ったURLから訪れたユーザーは、すべて直接(direct)アクセスしたことになります。
これだと、印刷物の宣伝効果が測れない―そんなのイヤだ!計測したい、そんなときにも方法があります。
URLの後ろに「?」で繋いで「utm_source」「utm_campaign」「utm_medium」を付けます。

http://サイトのURL?utm_source=媒体名&utm_campaign=キャンペーン名&utm_medium=媒体の種類

キャンペーンURLはこちらで作成することもできます。
https://ga-dev-tools.appspot.com/campaign-url-builder/

Campaign URL Builder

例えばこんな風になります。

 http://サイトのURL?utm_source=schedule&utm_campaign=201708&utm_medium=print 

上のコードでは
utm_source(媒体名)= schedule
utm_campaign(キャンペーン名)= 201708
utm_medium(媒体の種類)= print(印刷物)
となります。

でもこんなに長くて「?」や「&」が入っているURLってなんだか怪しいですね。入力もたいへん。なので、私たちは印刷物にはQRコードを貼り付けています。

Google アナリティクスで確認する

では、キャンペーンURLからのアクセスが反映されているかGoogleアナリティクスで確認してみましょう。
まず、集客>すべてのトラフィック>参照元/メディア を選択します。

Googleアナリティクス-集客

google、yahoo、facebookなど参照元ウェブページが並ぶ中、schedule/print と表示されているのがわかります。このように参照元として source/medium という形式で表示されます。

さらにキャンペーン毎のアクセス数を調べるには schedule/print をクリックし、移行した画面で セカンダリメディション>広告>キャンペーン を選択します。

Gpogle アナリティクス

utm_campaign別の表示に変わります。

Googleアナリティクス

最後に

イベントトラッキングでウェブサイトを訪れるユーザーの動向を知ったり、キャンペーンURLでさまざまなメディアの広告効果を計測してみると、ビジネスチャンスのヒントがあるかも知れません。

Font Awecome

スマートフォンでウェブサイトを見ることが多くなった今では、狭い面積でより多くの情報を伝えるためにアイコンが多く使われ、利用者もアイコンの形で意味を共有するようになりました。クラウドフォントの普及と相まって、今後もアイコンフォントを使う機会は増えるでしょう。
筆者はFont Awesomeをよく使います。

Font Awesomeを使う理由

実装が簡単

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

この1行だけ。この1行を<head>内に記述します。何もダウンロードする必要はありません。何もアップロードする必要もありません。Font Awesome用の特別なCSSもありません。たったこれだけです。だから、何かと競合することもありません。

日本語テキストとの親和性

Font Awesomeなら日本語のテキストと同じサイズで並べたとき「これホントに同じサイズ?」「縦方向が微妙にズレる」といったことがありません。サイズも位置も違和感なく横に並んでくれます。ほかのアイコンフォントで調整に苦労された方は是非一度Font Awesomeをお試しください。

デザインが良い

Font Awesomeは他のアイコンフォントよりデザインがカワイイと思いますが、これはまったくの主観です。

HTMLで使う

<head>内に、1行追加したら、Font Awesome Iconsにアクセスし、使いたいアイコンを検索します。適当に入力すると候補がいくつか表示されるので英語が苦手でも大丈夫。

Font Awecome Icons

候補から使いたいアイコンをクリックし、そのアイコンのページに行きます。

Font Awecome code

表示されている<i>タグをコピーし、入力したい場所に

<i class="fa fa-refresh" aria-hidden="true"></i> 再読み込み

と書くと次のような表示になります。

再読み込み

以上が基本の使い方ですが、以下のページに等倍やアニメーションなどさまざまな使い方が紹介されています。
http://fontawesome.io/examples/

CSSで使う

さて、HTML内に書く方法はわかりましたが、Font AwesomeをCSSの中で使いたいときはどうすれば良いでしょうか?例えばリストマーカーにしたいときなどです。CSS内でタグは使えませんね。、
そんなときはUnicodeを使います。Unicodeは当該アイコンのページのグレーのエリアに表示されている4桁のコードです。上のrefreshアイコンなら「f021」になります。これをcontentに記述しますが、Unicodeの前にバックスラッシュが必要です。(ソースは¥マークが表示されても大丈夫)

ul li:before{
  content: '\f021';
  font-family: FontAwesome;
}

Googleカレンダーはとても便利。
私はもう10年くらい使っています。

もちろんWebサイトにも埋め込めますし、
実際埋め込んでるページも見かけますが
カスタマイズはできないの?と
これまた、ずーっと思っていました。

さすがに今どきのことだからツールあるだろう、と
探してみたら gcalendar-wrapper.php というスクリプトが
公開されていました。これは便利!

Easy Color Customization for Embedded Google Calendars

そして、レスポンシブ対応は簡単。

<iframe src="https:~省略~" style="border-width:0" width="500" height="500" frameborder="0" scrolling="no"></iframe>

の width=”500″ の部分をwidth=”100%”とすると、iframeの幅が親要素の100%になります。
%の無い数字はpxを表しています。

(ちゃんと「フィーチャーフォン」と書きましたよ!)
ウェブ制作者やマスターのみなさまは、サイトがどのような環境で見られているかとても気になります。

中でも、かつて構築したPC用とケータイ用を.htaccessで振り分けたサイト…

「もうケータイ(フィーチャーフォン)用ページは要らないよなぁ、IE8対応もしなくてもいい」
「今どきフィーチャーフォンのアクセスなんてそんなにないはず」
「レスポンシブにしたいけど予算出ないし、うーん」

などなどの思い。

まずはクライアント様に「レスポンシブとは何か、なぜレスポンシブにしなければいけないか」を
説得しなければなりません。
そのためにはフィーチャーフォン用ページへのアクセスがいかに少ないかを数値で示すのがいいでしょう。

あ!フィーチャーフォン用ページってGoogle Analyticsでトラッキングできてないわ(泣)

気を取り直して今日からでもトラッキングしましょう。

ただ、フィーチャーフォンはjavascriptをサポートしてない機種もあり
「いつものアレ」を埋め込んでもトラッキングできません。

javascriptをサポートしてない機種はタグとして埋め込めるHit Builderを使うと便利です。

使い方はTips note by TAM さんが参考になります。

さて、フィーチャーフォンでどれくらい見られてるか、はたまた見られてないか明日以降が楽しみですね。
来年度の予算が取れますように。

こちらにアクセスして、その色が好きか好きじゃないかをクリックするだけで
好みの配色が作れるツールです。とっても便利!
http://www.palettable.io/

palettable

表示されているカラーインデックスをクリックするとテキストとしてコピーしたり、自分でインデックスを入力したりできます。