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

Входные данные такие. Есть приложения на 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)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
        ym(YOUR_ID, "init", {
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            webvisor: true
        });
        document.writeline('
 
 
<div><img src="https://mc.yandex.ru/watch/YOUR_ID" style="position:absolute; left:-9999px;" alt=""></div>
 
 
');
    }
);

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

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

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

You can leave a response, or trackback from your own site.

Leave a Reply