WEB広告や集客で電話タップのCTAを営業時間のみ表示する方法+改善方法

2024年10月15日

BtoCといった消費者のユーザー・顧客をターゲットとしたWEBサイトでスマートフォンから「電話」をかけてもらいたいサイトで営業時間外に電話タップがあることはないでしょうか。

広告の場合、電話表示オプションは表示する時間帯を設定できますが、サイト内の電話をかけるボタン・バナーは基本24時間表示されたままです。

営業時間外にサイトを見た方が電話ボタンをタップしても繋がらず機会損失が生まれてしまうこともあるでしょう。

WEB広告を運用して電話タップがコンバージョンとなっている場合は機械学習もきちんと回らなくなる可能性もあります。

この記事の結論で、サイト内にある電話のバナーやボタンを営業時間のみに表示する方法とページを開いた時間と分を表示して「◯時◯分電話がつながりやすくなっています」というあおりを追加する方法について説明します。

電話時間帯の表示：基本の営業時間外は非表示

お電話はこちら

上の青枠の中に時間と「お電話はこちら」という内容が表示されているでしょうか？

表示されている場合は指定した営業時間内で、表示されていない場合は営業時間外という設定となっています。(10時-17:30分)

具体的なコード例は以下となります。

装飾はしていないので見た目はシンプルですのであしからず。

HTML

<!-- メッセージを表示するための要素 -->
<div id="phone-message" class="hidden-time"></div>

<!-- 電話ボタンの要素。非表示にするために .hidden-time クラスを付ける -->
<a href="tel:0123456789" id="phone-call" class="phone-display hidden-time">お電話はこちら</a>

CSS

/* 電話ボタンとメッセージを非表示にするスタイル */
.hidden-time {
   display: none;
}

JavaScript

    // 時間をチェックして電話ボタンとメッセージを表示または非表示にする関数
    function checkTimeAndToggleDisplay() {
        // 電話ボタンの要素を取得
        const phoneButton = document.getElementById('phone-call');
        const phoneMessage = document.getElementById('phone-message');

        // 現在の時刻を取得
        const now = new Date();
        const hours = now.getHours(); // 現在の時刻（時）を取得
        const minutes = now.getMinutes(); // 現在の時刻（分）を取得

        // 表示する時間帯を設定（例: 10:00から17:30まで）
        const startHour = 10; // 開始時刻（時）
        const startMinutes = 0; // 開始時刻（分）
        const endHour = 17; // 終了時刻（時）
        const endMinutes = 30; // 終了時刻（分）

        // 時刻を「◯時◯分」の形式に整形する
        const formattedTime = hours + '時' + (minutes < 10 ? '0' + minutes : minutes) + '分';

        // 現在の時刻が設定された範囲内かどうかをチェック
        if ((hours > startHour || (hours === startHour && minutes >= startMinutes)) &&
            (hours < endHour || (hours === endHour && minutes <= endMinutes))) {
            // 設定した時間帯内であれば、電話ボタンとメッセージを表示
            phoneButton.classList.remove('hidden-time');
            phoneMessage.classList.remove('hidden-time');

            // メッセージを更新
            phoneMessage.textContent = formattedTime + ' 現在電話がつながりやすくなっています';
        } else {
            // 設定した時間帯外であれば、電話ボタンとメッセージを非表示
            phoneButton.classList.add('hidden-time');
            phoneMessage.classList.add('hidden-time');
        }
    }

    // ページが読み込まれた際に最初に時間をチェックしてボタンとメッセージを表示・非表示に設定
    document.addEventListener('DOMContentLoaded', checkTimeAndToggleDisplay);

    // 1分ごとに時間をチェックしてボタンとメッセージの表示を更新
    setInterval(checkTimeAndToggleDisplay, 60000);

が主なコードです。

    // 表示する時間帯を設定（例: 10:00から17:30まで）
    const startHour = 10; // 開始時刻（時）
    const startMinutes = 0; // 開始時刻（分）
    const endHour = 17; // 終了時刻（時）
    const endMinutes = 30; // 終了時刻（分）

部分を自社の営業時間に変えれば表示される時間が変わります。

<!-- メッセージを表示するための要素 -->
<div id="phone-message" class="hidden-time"></div>

<!-- 電話ボタンの要素。非表示にするために .hidden-time クラスを付ける -->
<a href="tel:0123456789" id="phone-call" class="phone-display hidden-time">お電話はこちら</a>

の部分はシンプルになっていますので適宜画像やボタンに変更CSSで文字の配置など調整が必要です。

基本の場合は、ボタン電話が「phone-call」がidとしてあるのでページ内にボタンが1つの場合ならいいですが、ページ内に電話ボタンが複数ある場合はclassにしないといけません。

◯時◯分の部分はCVR改善できる施策かなと思いつけています。使用する場合はABテストなど検証してみるのがいいでしょう。

電話CTAボタンをclassにして複数に対応

メッセージ表示エリア

お電話はこちらお問い合わせフォームはこちら

先程の例との変更点

ページ内に電話ボタンが複数ある場合にも対応
営業時間外になると電話リンクではなくフォーム問い合わせに切り替える

ページ内に電話ボタンが複数ある場合にも対応

最初のコード例は電話リンクがページ内に1つある場合のみのコードです。ページ内に電話が複数ある場合もあるので今回のコードは複数対応しています。

営業時間外になるとリンク(ボタン)を変更

上の青枠では設定した営業時間(10時-17時30分)に開いた場合は「お電話はこちら」が表示されており、それ以外の時間は「お問い合わせフォームはこちら」と表示されているはずです。

電話を消すより時間外はフォーム問い合わせしてもらえば逃す数が減るかもしれないので応用です。

以下のバージョンはCTAボタンが複数ある場合のコードサンプルです。

HTML

    <!-- メッセージを表示する要素 -->
    <div class="phone-message hidden-time">メッセージ表示エリア</div>

    <!-- 電話ボタンの要素。デフォルトでは非表示にするために .hidden-time クラスを付ける -->
    <a href="tel:0123456789" class="phone-display hidden-time">お電話はこちら</a>

    <!-- お問い合わせフォームへのリンク。デフォルトでは非表示にするために .hidden-time クラスを付ける -->
    <a href="/contact" class="contact-link hidden-time">お問い合わせフォームはこちら</a>

CSS

/* 電話ボタンとメッセージを非表示にするスタイル */
.hidden-time {
   display: none;
}

JavaScript

    // 現在時刻のメッセージを表示する関数
    function updatePhoneMessages() {
        const now = new Date();
        const hours = now.getHours(); // 現在の時刻（時）を取得
        const minutes = now.getMinutes(); // 現在の時刻（分）を取得

        // 分が一桁の場合は先頭にゼロを追加
        const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
        
        // 「◯時◯分 現在電話がつながりやすくなっています」というメッセージを作成
        const message = `＼ ${hours}時${formattedMinutes}分 現在電話がつながりやすくなっています ／`;

        // メッセージを表示するすべての要素を取得して、メッセージを設定
        const messageElements = document.querySelectorAll('.phone-message');
        messageElements.forEach(element => {
            element.textContent = message;
        });
    }

    // 時間をチェックして電話ボタンまたはお問い合わせフォームリンクを表示する関数
    function checkTimeAndToggleDisplay() {
        // 電話ボタン（複数）とメッセージ、お問い合わせフォームリンクの要素を取得
        const phoneButtons = document.querySelectorAll('.phone-display'); // すべての電話ボタンを取得
        const messageElements = document.querySelectorAll('.phone-message'); // すべてのメッセージ要素を取得
        const contactLink = document.querySelector('.contact-link'); // お問い合わせフォームリンクを取得

        // 要素が正しく取得できているか確認
        if (!phoneButtons.length || !messageElements.length || !contactLink) {
            console.error('必要な要素が見つかりません。');
            return;
        }

        // 現在の時刻を取得
        const now = new Date();
        const hours = now.getHours(); // 現在の時刻（時）を取得
        const minutes = now.getMinutes(); // 現在の時刻（分）を取得

        // 表示する時間帯を設定（例: 10:00から17:30まで）
        const startHour = 10; // 開始時刻（時）
        const startMinutes = 0; // 開始時刻（分）
        const endHour = 17; // 終了時刻（時）
        const endMinutes = 30; // 終了時刻（分）

        // 現在の時刻が設定された範囲内かどうかをチェック
        if ((hours > startHour || (hours === startHour && minutes >= startMinutes)) &&
            (hours < endHour || (hours === endHour && minutes <= endMinutes))) {
            // 設定した時間帯内であれば、すべての電話ボタンとメッセージを表示
            phoneButtons.forEach(button => button.classList.remove('hidden-time'));
            messageElements.forEach(element => element.classList.remove('hidden-time'));

            // お問い合わせフォームリンクを非表示
            contactLink.classList.add('hidden-time');

            // メッセージを更新
            updatePhoneMessages();
        } else {
            // 設定した時間帯外であれば、すべての電話ボタンとメッセージを非表示
            phoneButtons.forEach(button => button.classList.add('hidden-time'));
            messageElements.forEach(element => element.classList.add('hidden-time'));

            // お問い合わせフォームリンクを表示
            contactLink.classList.remove('hidden-time');
        }
    }

    // ページが読み込まれた際に最初に時間をチェックしてボタンまたはリンクを表示・非表示に設定
    document.addEventListener('DOMContentLoaded', checkTimeAndToggleDisplay);

    // 1分ごとに時間をチェックしてボタンとリンクの表示を更新
    setInterval(checkTimeAndToggleDisplay, 60000);

というような使い方ができます。

電話つながりやすくなっていますが無しの場合

電話がつながりやすくなっていますはいらないという方のためにシンプルなものが以下のコードとなります。

サンプル表示は他のコードと噛み合わなくなるので表示していません。当サイトでテストして表示の確認はできております。

HTML

    <!-- 電話ボタンの要素。デフォルトでは非表示にするために .hidden-time クラスを付ける -->
    <a href="tel:0123456789" class="phone-display hidden-time">お電話はこちら（クラスのみ）</a>

    <!-- お問い合わせフォームへのリンク。デフォルトでは非表示にするために .hidden-time クラスを付ける -->
    <a href="/contact" class="contact-link hidden-time">お問い合わせフォームはこちら</a>

CSS

/* 初期状態で電話ボタンとお問い合わせフォームリンクを非表示にするスタイル */
  .hidden-time {
  display: none;
}

JavaScript

   // 時間をチェックして電話ボタンまたはお問い合わせフォームリンクを表示する関数
    function checkTimeAndToggleDisplay() {
        // 電話ボタン（複数）とお問い合わせフォームリンクの要素を取得
        const phoneButtons = document.querySelectorAll('.phone-display'); // すべての電話ボタンを取得
        const contactLink = document.querySelector('.contact-link'); // お問い合わせフォームリンクを取得

        // 要素が正しく取得できているか確認
        if (!phoneButtons.length || !contactLink) {
            console.error('必要な要素が見つかりません。');
            return;
        }

        // 現在の時刻を取得
        const now = new Date();
        const hours = now.getHours(); // 現在の時刻（時）を取得
        const minutes = now.getMinutes(); // 現在の時刻（分）を取得

        // 表示する時間帯を設定（例: 10:00から17:30まで）
        const startHour = 10; // 開始時刻（時）
        const startMinutes = 0; // 開始時刻（分）
        const endHour = 17; // 終了時刻（時）
        const endMinutes = 30; // 終了時刻（分）

        // 現在の時刻が設定された範囲内かどうかをチェック
        if ((hours > startHour || (hours === startHour && minutes >= startMinutes)) &&
            (hours < endHour || (hours === endHour && minutes <= endMinutes))) {
            // 設定した時間帯内であれば、すべての電話ボタンを表示
            phoneButtons.forEach(button => button.classList.remove('hidden-time'));

            // お問い合わせフォームリンクを非表示
            contactLink.classList.add('hidden-time');
        } else {
            // 設定した時間帯外であれば、すべての電話ボタンを非表示
            phoneButtons.forEach(button => button.classList.add('hidden-time'));

            // お問い合わせフォームリンクを表示
            contactLink.classList.remove('hidden-time');
        }
    }

    // ページが読み込まれた際に最初に時間をチェックしてボタンまたはリンクを表示・非表示に設定
    document.addEventListener('DOMContentLoaded', checkTimeAndToggleDisplay);

    // 1分ごとに時間をチェックしてボタンとリンクの表示を更新
    setInterval(checkTimeAndToggleDisplay, 60000);

となります。こちらはシンプルに電話とお問い合わせの切り替えのみです。

とはいえ、基本的に、メールと電話のCTAが並んでいる場合も多いのでこちらは使わないかもですね。