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

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設定が可能です。
ダブルクォーテーションの中にシングルクォーテーションがあるので正規表現にしないとうまく動かないです。

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

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad