レスポンシブデザインのものに、リスティングコンバージョンタグを埋め込んで欲しいという依頼がありました。
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設定が可能です。
ダブルクォーテーションの中にシングルクォーテーションがあるので正規表現にしないとうまく動かないです。
これでスマホ閲覧時のみコンバージョンタグが有効になります。
パソコンから電話するにはアプリが必要ですし、クリックしてポップアップが表示されると紛らわしいのでできれば削除した方がいいかもしれないですね。