当サイトの記事には広告が含まれている場合があります

電話リスティングコンバージョンタグをスマホ表示のみ埋め込む

bdb6a4ddc6f6fca6fd52c50d82474327_m
 

レスポンシブデザインのものに、リスティングコンバージョンタグを埋め込んで欲しいという依頼がありました。
html側にYahoo、Googleから発行されたタグ埋め込みしてある状態で、電話部分にonclickタグを埋め込んで欲しいということでした。

そのまま埋め込むと、レスポンシブデザインなのでパソコンの場合もクリックしてポップアップが表示されるようになってしまいます。でも、パソコンではクリックできないようにしたいです。

ということで、レスポンシブデザインで気をつけたい、電話番号の扱いを参考にして組み込むことに。

HTML

<span data-action="call" data-tel="0312345678">0312345678</span>

 

JavaSctipt

<script>
$(function() {
  if (!isPhone())
      return;

  $('span[data-action=call]').each(function() {
      var $ele = $(this);
      $ele.wrap('<span onClick="goog_report_conversion(\'tel:' + $ele.data('tel') + '\');yahoo_report_conversion(undefined);return false;"></span>');
  });
});

function isPhone() {
  return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}
</script>

 

参考にしたURLのJavaScriptのコードの書き換え部分を少しいじればスマホのみonclick設定が可能です。
ダブルクォーテーションの中にシングルクォーテーションがあるので正規表現にしないとうまく動かないです。

これでスマホ閲覧時のみコンバージョンタグが有効になります。
パソコンから電話するにはアプリが必要ですし、クリックしてポップアップが表示されると紛らわしいのでできれば削除した方がいいかもしれないですね。
 

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
html・css
スポンサーリンク
くるりんをフォローする
Memorandums