Интеграция коллтрекинга МАНГО ОФИС (режим Площадка)

Адрес:
https://www.mango-office.ru/

Доступные методы:
https://www.mango-office.ru/support/calltracking_vs_analytics/api_dinamicheskogo_kolltrekinga/js_api_use_cases/?PATH=%2Fcalltracking_vs_analytics%2Fapi_dinamicheskogo_kolltrekinga%2Fjs_api_use_cases 


Доска объявлений

1.  Для настройки доски необходимо подключить эту услугу в кабинете. Для этого идем в кабинет, далее Коллтрекинг
   
   Далее “Настройки”, далее “Доски объявлений”
   
   
   Настраиваем услугу (включаем ее и настраиваем IVR, вот документация для его настройки
   https://www.mango-office.ru/support/virtualnaya_ats/bystryy_start/nastroyka_skhemy_priema_zvonkov/?utm_source=inst)

2.  На своей странице внедряем в head перед body следующий скрипт
   

   <script>
       (function(w, d, u, i, o, s, p) {
           if (d.getElementById(i)) { return; } w['MangoObject'] = o;
           w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
           s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
           p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
       }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
       mgo({calltracking: {id: XXXXXX}});
   </script>
   

   Этот скрипт можно получить из кабинета

3. Затем на странице внедряем обработчик события запроса подмены номера

      Код верстки для примера:

<div class="mango-number-block">
   <input type="hidden" class="as-userPhone" value="79876543210">
   <a href="#0" class="show-number">Показать</a> <a class="mgo-number"></a>
</div> 

ВАЖНО: если у вас на странице несколько номеров, они все должны отличаться классами, например “mgo-number-{id}”, также нужно сгенерировать хэш

Код jquery:

$(document).on('click', '.show-number', function (e) {
  e.preventDefault();
  var isSucces = false;
  var ph = $(this).closest('.mango-number-block').find('.as-userPhone').val();
  // Запрашиваем номер
  var hash = as.tools.smallGuidGenerator();
  mgo.getNumber({ redirectNumber: ph, hash:hash }, function(result) {
	console.log("xx",result);
  // Вставляем номер телефона во все теги с классом mgo-number
  document.querySelectorAll('.mgo-number').forEach(function(elem) {
	  $(elem).html(" "+result.number);
	  var attr = $(elem).attr('href');
	  if(typeof attr !== typeof undefined && attr !== false){
		$(elem).attr('href','tel:+'+result.number);
	  }
	  isSucces = true;
	  $('.show-number').hide();
	});
  });
  setTimeout(function(){
	  if(!isSucces){
		  console.log("Mango Неверный номер")
	  }
  },1000);
});