VueJS: прототип самостоятельной функции - PullRequest
Новая
       18

VueJS: прототип самостоятельной функции

0 голосов
/ 22 марта 2020

Я хочу добавить сторонний скрипт для метрик в мой проект Vue и использовать его глобально.

В обычном случае его следует поместить в тег head для загрузки, а затем использовать глобально: 

<head>
...
<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://example.com/metrics/tag.js", "metrics");

      metrics(<ID>, "init", {
          clickmap:true,
          trackLinks:true,
          accurateTrackBounce:true
      });
</script>
<noscript><div><img src="https://example.com/metrics" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</head>

И тогда я могу вызвать metrics функцию на странице с событием щелчка, то есть:

<a href="/home" onclick="metrics(<ID>,'reachGoal','goHomePage');">Home</a>

Так что я нужно сделать, чтобы поместить этот скрипт в main.js файл и создать прототип этой функции следующим образом: 

Vue.prototype.$metrics = (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://example.com/metrics/tag.js", "metrics");

, а затем использовать его в Vue таких компонентах: 

created() {
   this.$metrics(<ID>,'reachGoal','someAction');
}

Как лучше всего реализовать такой скрипт метрик в Vue проекте?

...