Опыт подключения Яндекс.Метрики в vaadin

12 апреля, 2019 rius

Входные данные такие. Есть приложения на vaadin, в него нужно вставить джаваскриптовый код и кусочек HTML разметки.

Вставить в приложение на vaadin нужно такой код: 

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
   ym(YOUR_ID, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
 
<noscript>
 
 
<div><img src="https://mc.yandex.ru/watch/YOUR_ID" style="position:absolute; left:-9999px;" alt="" /></div>
 
 
</noscript>

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

window.addEventListener("DOMContentLoaded", function (event) {
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a);
var div = e.createElement('div');
        div.innerHTML = '<img src="https://mc.yandex.ru/watch/YOUR_ID" style="position:absolute; left:-9999px;" alt="">';
})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
        ym(YOUR_ID, "init", {
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            webvisor: true
        });
 
    }
);

Теперь пояснения. Джаваскриптовые вызовы я обрамил обработчиком события DOMContentLoaded, прочитать про него можно здесь.
Вставки HTML — добавление картинки размеров в один пиксель — я сделал через создание в документе тега div.
Весь получившийся код я сохранил в файл yandex_metric.js и поместил файл в папку webapp/VAADIN/js/yandex_metric.js. Далее, у класса, реализующего интерфейс com.vaadin.ui.UI, добавил аннотацию: 

@JavaScript({"vaadin://js/yandex_metrics.js"})

Думаю, код подобных счетчиков можно вставить в приложение таким же методом.
Прошу прощения за WordPress, который навязчиво портит форматирование при сохранении (в частности, добавляет лишние пустые строки).

Related Posts

Posted in Программирование Tags: , ,
«
»
You can leave a response, or trackback from your own site.

Leave a Reply