スマホサイト改善テク！タップで電話できるリンク設定とイベントトラッキングの基本を試す
スマホサイトからの問い合わせを増やしたい？
それなら、タップで電話がかかる仕組みを活かしましょう。リンクをポンで電話をかけられるのは、スマホサイトならではのアドバンテージです。
同時に、Googleアナリティクスでイベントトラッキングの設定も忘れずにしておきます。タップによる電話の発生を計測し、さらに問い合わせを増やすための改善のヒントを得られます。
両方とも、それほど手間はかかりません。ほぼコピペでOKなので、ぜひこの機会にお試しあれ！
ウェブさえ
目次
1. タップで電話がかかるリンク設定
PCと比べて画面サイズや接続速度が不利に働きがちなスマホサイト。でも、その画面の小ささや接続速度の遅さが、他サイトとの比較を面倒にするという側面もあります。その気になった訪問者を直ちに問い合わせへ導く仕掛けを準備しておくことで、他サイトとの競争をまぬがれ、問い合わせの数を増やせます。
そのための一番の方法が、「指でタップ→電話がかかる」リンク設定です。HTMLでリンクタグを以下のように記述します。電話番号には自分の電話番号を当てはめてください。
<a href="tel:電話番号">電話番号</a>
これだけでも構いませんが、郵便番号のような連続した数字（例：987-987-987）を電話番号だと勘違いし、勝手にリンクの設定をするお節介なスマホがいます。それを防ぐには、以下のメタタグをheadタグ内に記述します。
<meta name="format-detection" content="telephone=no">
これでスマホサイトから電話をかけられるようになりました！
でも問題がひとつ。かかってきた電話をスマホサイトからのものか判別できないのです。電話の向こうのお客様に「スマホサイトからですか？」と尋ねるのはスマートなやり方とは言えません。そこでGoogleアナリティクスの出番です！
2. Googleアナリティクスのイベントトラッキング
Googleアナリティクスの『イベントトラッキング』という機能を利用すれば、タップによる電話の発生を記録できます。
イベントトラッキングの『イベント』とは、訪問者の行動によって生じる出来事のことで、『トラッキング』は計測するという意味を持ちます。計測できるイベントには、今回の「タップ」以外にもこのような例があげられます。
- PDFをダウンロード
- ショッピングカートへ商品を追加
- ログイン
- ページのスクロール
- 音楽プレイヤーの再生
計測するのに必要な準備は、先ほどのリンクタグに以下の記述を加えるだけです。新・旧、二種類の記述方法があります。すでにユニバーサル アナリティクスに移行済の人は新バージョンを。まだ従来のGoogleアナリティクスを利用している人は旧バージョンを使ってください。
ユニバーサルアナリティクス？ 従来の？ 新or旧、私はどっちを使えばいいの？ という人は下のリンク先が詳しいです。参考にどうぞ。
新バージョン
onclick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);"
旧バージョン
onClick="_gaq.push(['_trackEvent', 'カテゴリ', 'アクション', 'ラベル',値]);"
前半の英語部分はお決まりでなのでそのままに、後半の日本語のところは下の表を参考に記述します。
| カテゴリ（必須） | 発生するイベントを分類するための名称をカテゴリとして記述します。今回は電話リンクのタップを計測するので、『電話リンク』にしました。 |
| アクション（必須） | カテゴリに対する訪問者の行動を記述します。今回は「電話リンク」に対する操作として『タップ』にしました。 |
| ラベル（任意） | さらに細かくイベントを分類したいときに記述します。例えば、「ヘッダー」や「サイドバー」のように記述して、場所ごとに計測結果を比較したりできます。今回未使用。 |
| 値（任意） | イベントに数字を割り当てられます。例としては、問い合わせ一件に相当する売上額を入れたりします。イベントの発生がどれくらい売上に貢献しているのか具体的な数字でつかめますね。今回未使用。 |
ちなみにそれぞれを要素と呼びます。必須の要素は必ず記述が必要です。任意は特別な意図がある場合に記述します。各要素について、より詳しい情報は公式ヘルプで確認できます。
今回はタップによる電話の発生だけを対象に計測するので、最低限必要な箇所だけを埋め、このように記述しました。
新バージョン
<a href="tel:電話番号" onclick="ga('send', 'event', '電話リンク', 'タップ');">電話番号</a>
旧バージョン
<a href="tel:電話番号" onClick="_gaq.push(['_trackEvent', '電話リンク', 'タップ']);">電話番号</a>
それでは、実際にネット上にアップしてから動作確認をしてみましょう。Googleアナリティクスのリアルタイムを眺めながら、スマホからタップするとイベントが発生したのが分かります。画面下のカテゴリには、上で記述した通り「電話リンク」と表示されてますね。ということで、大成功！
一定期間計測されたデータを確認するには「行動＞イベント」を見ます。分析にトライし、改善に役立てましょう。
3. 電話を目標として登録
追加でもう一つ、『目標』の設定もしておきましょう。
目標とは、訪問者に最終的にして欲しいこと行動のことをいいます。Googleアナリティクスで目標を設定すれば、目標の達成率や、訪問者が目標に達成した経路をレポート上で知ることができます。
目標の設定はGoogle アナリティクスの「アナリティクス設定」の画面で行います。手順は以下の通りです。
1. アナリティクス設定からビューの目標をクリック
2. 新しい目標を作成します
3. 目標の説明を入力します
| 名前 | スマホから電話 |
| タイプ | イベント（選択） |
上記のように入力し次のステップへ。
4. 目標の詳細を入力
| カテゴリ | 電話リンク |
| アクション | タップ |
このように入力しました。ラベルと値は今回使ってないので空白のまま。保存して完了です。
リアルタイムのコンバージョンを開きながら、電話リンクをタップしてみます。棒がひょこっと現れ、目標を達成したことが分かります。目標の説明を見ると「スマホから電話」と表示されてますね。これまた大成功！
ある程度の期間計測したら、「コンバージョン＞目標」でより詳細なデータを掘り下げられます。改善のヒントがいっぱい詰まってます。
以上！
注意すべきは、「イベント発生のタイミング＝タップと同時」になることです。電話がつながってからではないので、受付現場で集計する電話の問い合わせ数とGoogleアナリティクスのレポートには誤差が生じる場合があります。
また、今回の電話リンクがPCサイトにも表示されている場合、クリックもイベントとして計測対象になります。より厳密にタップだけを計測したい場合は、上級者向けの設定/記述方法が必要です。興味のある人はググってみてください。
イベントトラッキングについては、今回、説明不足な感じが否めないので、改めて詳しく記事にしたいと思ってます。見逃したくない方は、ぜひ更新情報をフォローしてください。
ほな、ごゆるりと〜
読み終わったらシェア！
ウェブさえの無料サービス
どちらでもお好きな方を。もちろん両方でも。
SEOサービス【丸投げOK】ウェブさえがSEOに強い記事を作成します
SEOに強い記事は書けていますか？
クラウドソーシングのライターで満足できていますか？
実績10年以上のウェブさえが、このブログで見られるような記事をお作りします。
SEOだけでなくCVも意識。企画から公開までのすべての作業をお任せいただけます。
