こんにちは！最近では予算管理だけでなく、広告の入稿作業も少し慣れてきた坂東です！
入稿が完了したらコンバージョンの計測を行うためにGoogleタグマネージャー等を用いてコンバージョンタグを設定する方も多いと思います。
リンクがクリックされた、なども、タグを動作させるための条件に組み込みやすく、運用者のみなさんにも馴染みのあるツールだと思います。
そのときに「電話問い合わせのコンバージョン」を計測するために「電話番号リンクのクリック」をトリガーに設定している方もいらっしゃるかと思います。
でも、そのままだと、PCもSPも、クリックされたときにトリガーが動作しちゃう？！
そんなケースが有るぞというのに気が付き、システムエンジニア経験のある私が、簡単なコーディングで解決できる策を用意してまいりました！
実際の設定
一般的には、電話番号リンクは以下の形で設定されますよね。
<a href="tel:090-1234-5678">090-1234-5678</a>このままだとSPでもPCでも表示されてしまいます。
スマホの場合にのみリンクにするのであれば、PCのときは非表示にすれば良いです。
例えば、以下のようにクラス属性を適用し、以下のCSSを用いれば、PCのときはリンクテキストではなく通常のテキストで表示されます。
HTML
<a class="--sp-only" href="tel:090-1234-5678">090-1234-5678</a>
<p class="--pc-only">090-1234-5678</p>CSS
.--pc-only {
display: none;
}
@media screen and (min-width:1024px) {
.--sp-only {
display: none;
}
.--pc-only {
display: block;
}
}メディアクエリの画面サイズ（min-widthのpxサイズ箇所）に関しては各自環境に合わせてください。
ただし、上記の方法ではブラウザでの表示上はリンクで無くすことが可能ですが、ソースコードとしてはスマホ・PCそれぞれのコードが残った状態となってしまいます。
その場合は以下の記事で紹介されているようにJavaScriptを用いて制御する方法もございます。
あとがき
今回は広告運用者の方向け（非エンジニアの方を想定）で私が思う最も簡単に電話番号リンクをPCでは無効にする方法をご紹介しました。
他者の記事の方法も紹介しましたが、お客様の環境によって方法は他にもございます。例えば、WordPress環境であればスマホ・PCで出力するコードを切り替えることも可能です。
天天堂は、ウェブ広告領域の情報発信を通じて、ウェブ広告にチャレンジする多くの方を応援したいと思ってます。もちろん、同業の方とも研鑽して盛り上がっていきたいと思っております。
もし、ウェブ広告の運用をお任せしたいとおもってくださった方は、ぜひ天天堂までご連絡ください。
コメント