スマホ未対応WordPressサイトでもタップで電話できるようにして、その回数を計測する方法

最新更新日：2015年12月31日(木曜日)

公開日：2015年2月3日(火曜日)

Pocket

予算がなくてスマホ対応サイトにできない！という方も多いかと思います。

ただスマホからの閲覧は美容室サイトでは85%以上、歯科・飲食でも60%以上となっていて、これからますますスマホ閲覧が増えます。

スマホ対応サイトにするメリットは

スマホで見やすくなる（未対応だと文字が小さい）
検索で微妙に有利になる（Googleがスマホ対応を推奨）
直接タップで電話できて受注率が上がる

ということです。

作成した色んなサイトの解析データを見るに【直接タップして電話する】スタイルは徐々にユーザーに浸透してきていますね。

今日はスマホ未対応のサイトでもタップで電話できるようにして、何人の方が電話したかをだいたい把握してサイト改善につなげる方法をご紹介します。

このページの目次

スマホ未対応サイトでもタップボタンを表示する方法

スマホに対応しているサイトでは横幅で分岐すればいいですね。

今回はWordPressのスマホ未対応サイトでタップボタンを表示する方法を紹介します。

phpに書くコード(header.phpやindex.phpなど表示したい場所に)

<?php if ( wp_is_mobile() ) : ?>
<a class="sp-tel" href="tel:0952317656">タップでお電話できます♪</a>
<?php else: ?>
<?php endif; ?>

CSSに書くコード

a.sp-tel{
  display: block;
  background: #58AE55;
  box-shadow: 0px 7px #3C833A;
  padding: 10px;
  font-size: 45px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
}

これだけで

ebisu

こんな感じになります。
ボタンは立体的に見えるようにしたほうがクリックする場所と認識されやすいです。

上の写真のサイトは　佐賀市整骨院｜恵比寿鍼灸整骨院　で見ることが出来ます。

スマホで電話タップした回数を計測する方法

次にGoogleアナリティクスでスマホで電話タップが何回あったのかを計測します。

WordPressのプラグイン All in One SEO PackなどでGoogleアナリティクスをサイトに導入しておいてくださいね。

回数を計測するためのコードを導入しよう

<script type="text/javascript">jQuery(function() {
    jQuery("a").click(function(e) {
        var ahref = jQuery(this).attr('href');
        if (ahref.indexOf("inthecom.net") != -1 || ahref.indexOf("http") == -1 ) {
            ga('send', 'event', '内部リンク', 'クリック', ahref);}
        else {
            ga('send', 'event', '外部リンク', 'クリック', ahref);}
        });
    });
</script>

コピーしてfooter.phpの＜? wp_footer(); ?＞の直前に貼り付けてください。
その際、コード内の「inthecom.net」はご自身のドメインに書き換えておいてくださいね。

上記のコードは
少し玄人ぶって、Googleアナリティクスのイベントトラッキングをサイト改善に使ってみよう！
こちらの記事を参考にさせていただきました。