Как скрыть часть номера телефона на сайте

Как скрыть часть номера или почты и показывать при нажатии на кнопку — лучшее решение, которое я нашел. Задача в принципе простая — отслеживать цели потенциальных клиентов в системе аналитики по событию. И периодически требуется в работе любому, кто занимается интернет-маркетингом

Сначала решение, а потом болтовня и рассказы о том, как это было…

Первая часть кода — условная разметка для удобства (можно не обращать внимания)

 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
       

После библиотеки подключаем сам скрипт, который имеет следующий вид:

Вторая часть кода — условная разметка для удобства (можно не обращать внимания)

 
    
<script>
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
});
});
</script>
       

В этом скрипте Вам нужны в будущем только две предпоследние строки:

 
    
        $('.sh_nmr').textToggle(".sh_nmr","").click();
        $('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
    

Первая строка отвечает за скрытие слова ПОКАЗАТЬ после нажатия. Вторая — за замену части номера, ну или всего, если Вы немного переделаете.
Чтобы скрипт работал, Вам нужно свой номер телефона, часть которого Вы хотите скрыть, обернуть в некоторые теги и добавить кнопку ПОКАЗАТЬ. Выглядеть номер с кодом должен примерно так:

Третья часть кода — условная разметка для удобства (можно не обращать внимания)

 
    
        +1234<span class="num_hide">567890</span> <span class="sh_nmr">показать</span>
      

Часть или весь номер нужно заключить в тег span с классом — num_hide. После номера добавить кнопку ПОКАЗАТЬ, заключенную в тег span с классом — sh_nmr

Источник материала

«Детские» примечания

Проверить библиотеку jquery и НЕ подключать, если уже подключена на сайте.
*Важно! Библиотека должна быть вызвана перед кодом, иначе не сработает скрипт.
**На некоторых сайтах скрипты подключаются в подвале для ускорения загрузки страниц
— проверить библиотеку там и разместить между тегами head, ПЕРЕД вызовом скрипта.

Что я искал и как решил

В реализации же все оказалось сложнее. Этот вариант хоть и работает сразу, но эстетически меня не устраивал, тот факт, что надпись была справа от скрываемого телефона.

Мне же было нужно, чтобы была просто надпись или кнопка «ПОКАЗАТЬ НОМЕР» или «ПОКАЗАТЬ ПОЧТУ», и при клике на эту надпись появлялся бы телефон или почта соответственно.

А так как я в js соображаю не больше, чем в Китайском языке, вернулся к поиску решений.

Нашел еще несколько вариантов, но в итоге все оказались или не рабочими или у меня не хватило терпения ковыряться с ними.

В общем я было уже смирился и снова вернулся к этому варианту и начал работать со стилями.

А ларчик просто открывался

Просто во второй части кода в самом низу, нужно стереть иксы (ХХХХХХХ)… ))

Уважаемые читатели, пожалуйста, не «тычьте» на сайте на эти кнопки в «неположенных» местах )). Дело в том, что на них настроены цели в метрике и если Вы просто для интереса будете нажимать, статистика будет искажена.

Чтобы посмотреть, как это работает, я поместил отдельную кнопку сюда (да и цель на нее установил жмите, сколько хотите)

Кто нажмет на эти кнопки за пределами этой страницы — тот Филипп Киркоров! Если Вы подумываете что-то заказать у меня, то на Вас это правило не действует

Вариант №1 +1234567890 Показать часть номера

Вариант №2 +1234567890 Показать номер

Вариант №3 adres@pochtbl.ru Показать фигу почту, ссылку на вк, ок, фб

Вариант №4 Перейти в раздел «Чердак»Показать ссылку

Кстати о ссылках. Тоже не сразу сработало, чтобы кликабельной была именно ссылка, поэтому делюсь.
Выглядеть будет так:

 
    
        <a href="#"><span class="num_hide">Перейти в раздел "Чердак"</span></a><span class="sh_nmr" style="color:#222222;"><b>Показать ссылку</b></span>
    

В качестве бонуса — как установить в метрике цель на кнопку «показать»

Создаем цель в метрике с произвольным, но лучше с понятным, идентификатором.
Например: a_clik_post_pokzat_tel
Устанавливаем «Тип условия:» на «JavaScript-событие».
Указываем понятное «название» для аналитики.

После чего берем событие:

 
    
 onclick="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;"
    

Где XXXXXX — это номер счетчика,
а TARGET_NAME — это название события (в нашем случае «a_clik_post_pokzat_tel» без кавычек).

Почитать про события можно >>здесь — яндекс справка<< , там немного, событие на кнопку, на ссылку, на форму и на передачу коммерческих данных.

И вставляем в ссылку (или кнопку — у них одинаковые события).

Получилось так:

 
    
 <a href="#" onclick="ym(37761890, 'reachGoal', 'a_clik_post_pokzat_tel'); return true;">Перейти в раздел "Чердак"</a></span>
    

Полный вариант с событием и с кнопкой «показать» будет выглядеть так:

 
    
 <a href="#" onclick="ym(37761890, 'reachGoal', 'a_clik_post_pokzat_tel'); return true;"><span class="num_hide">Перейти в раздел "Чердак"</span></a><span class="sh_nmr" style="color:#222222;"><b>Показать ссылку</b></span>
    

* Примечание: В ссылках на телефон («tel:») и почту («mailto:») не ставить атрибут (target=»_blank») — выдает ошибку на мобильных.

**Для отслеживания нажатия на ссылку/почту/телефон можно поставить еще одно событие и цель в метрике соответственно

«Делай дела от сердца» — © Руставели

Чтобы скрыть телефонный номер, вам потребуется сделать несколько моментов на своем сайте. Для начала нужно добавить скрипт. Но, для его роботы нужна библиотека jQuery. Если она подключена на сайте, то все отлично, если нет, то нужно ознакомится с статьей. Сама библиотека:

После библиотеки подключаем сам скрипт, который имеет следующий вид:

В этом скрипте, вам нужно в будущем только две предпоследние строки:

Первая строка отвечает за скрытие слова ПОКАЗАТЬ после нажатия. Вторая за замену части номера, ну или всего, если вы немного переделаете.

Чтобы скрипт работал, вам нужно свой номер телефона, часть которого вы хотите скрыть, обернуть в некоторые теги и добавить кнопку показать. Выглядит номер с кодом должен примерно так:

Часть или весь номер, нужно заключить в тег span с классом — num_hide. После номера добавить кнопку показать, заключенную в тег span с классом — sh_nmr.

По желанию, можете добавить стилей в соответствии с нуждами сайта и тд. Если все правильно сделано, то все должно работать правильно и безотказно.

В Яндекс.Метрике стало доступно отслеживание звонков с десктопной версии сайта в рамках цели «Клик по номеру телефона». Рекламодатели могут скрыть часть телефонного номера компании на сайте. Чтобы его открыть, пользователю нужно будет навести на него курсор. Тогда действие запишется в отчет как целевое, говорится в блоге Яндекс.Метрики.

Ранее цель «Клик по номеру телефона» позволяла отслеживать звонки только с мобильной версии сайта.

Чтобы включить скрытие части номера телефона на сайте, рекламодателю нужно создать новую цель «Клик по номеру телефона» или отредактировать существующую, установив чекбокс в соответствующем поле. Система позволяет выбрать, для каких номеров на сайте использовать частичное отображение — для всех или для избранных.

До запуска цели рекламодатели могут открыть режим предпросмотра и узнать, для каких номеров функция будет работать, а для каких понадобится внести изменения в верстку сайта. Для этого нужно кликнуть на кнопку «Как это будет выглядеть на вашем сайте».

Отключить скрытие части номера можно в любой момент.

Как использовать данные из отчета по цели «Клик по номеру телефона»:

• изучите статистику о посетителях сайта, которые собирались связаться с вами по телефону;

• оцените эффективность рекламных каналов, которые привели заинтересованных пользователей;

• покажите рекламу аудитории, которая похожа на звонивших вам пользователей.

Подробнее об отслеживании кликов пользователей на номер телефона — в справке Яндекса.

Напомним, что недавно Яндекс интегрировал Яндекс.Маркет с Метрикой, чтобы продавцы маркетплейса могли отслеживать статистику о заказах и покупателях.

Подпишитесь, чтобы получать полезные материалы о платном трафике

Всем привет, сегодня на форуме был задан интересный вопрос.Как скрыть часть номера телефона, а при нажатии ссылки «показать «показывался . Ну вопрос не из сложных, решений множество как на js так и на php.
Ну я объясню вариант попроще.
Самый простой вариант это js
Итак приступим
1. Добавим стиль в файл стилей

Код:

  .hide-tail{
    display: none;
  }

Этот стиль будет скрывать блок с номером телефона
2.Теперь подключаем скрипт который будет подменять наш блок и показывать номер.

Код:

<script>
 $.fn.textToggle = function(d, b, e) {
    return this.each(function(f, a) {
        a = $(a);
        var c = $(d).eq(f),
            g = [b, c.text()],
            h = [a.text(), e];
        c.text(b).show();
        $(a).click(function(b) {
            b.preventDefault();
            c.text(g.reverse()[0]);
            a.text(h.reverse()[0])
        })
    })
};
$(function(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX","скрыть телефон")
});
</script>

Его подключать ниже подключения jquery
3.Сам код с номером телефона

Код:

<span class="hide-tail">+7 999 1112223</span> <a href="#" class="click-tel">показать телефон</a>

Как видите номер заключён в тег span с классом «hide-tail», т.е. блок является не видимым и скрипт выводит значение «+7XXXXXXX» , после клика по ссылке появляется блок с номером и ссылка меняется на «скрыть телефон».
Вот и все , проще не куда ,можно конечно сделать и на css3,но это потом.

Можешь почитать и вот эту статейку «Симпотичные часы на флеше»