Comment implémenter les statistiques Baidu à l'aide de vue

Cet article présente principalement la solution consistant à ajouter du code de statistiques Baidu à l'application Vue d'une seule page. Les amis qui en ont besoin peuvent s'y référer

Après avoir postulé pour les statistiques Baidu, vous obtiendrez un morceau de code JS qui doit être inséré dans chaque page Web. Dans le projet Vue.js, la première chose qui vient à l'esprit peut être d'insérer le code statistique dans le fichier d'entrée index.html, afin qu'il puisse être inséré globalement et disponible sur chaque page. ; cela implique un problème, Vue.js Le projet est une application monopage. Chaque fois qu'un utilisateur navigue sur le site Web, la page ne sera pas actualisée lors de l'accès à la page interne, ce qui signifie que le code de statistiques Baidu ne sera pas déclenché ; Ainsi, l'effet final observé dans l'arrière-plan des statistiques de Baidu est que seule la page Web est comptée. Le trafic de l'entrée ne peut pas être compté, mais le trafic des pages internes ne peut pas être compté.

Solution

Appelez la méthode afterEach de vue-router dans le fichier main.js et ajoutez le code de statistiques à cette méthode, comme ceci Chaque fois que le routeur change, le code statistique sera exécuté, atteignant ainsi l'objectif. Le code est le suivant :

router.afterEach( ( to, from, next ) => {
 setTimeout(()=>{
   var _hmt = _hmt || [];
   (function() {
    //每次执行前，先移除上次插入的代码
    document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxx";
    hm.id = "baidu_tj"
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
   })();
 },0);
} );

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

Comment implémenter la fonction de boule bicolore dans JS

Comment implémenter l'effet d'animation de neige dans jQuery

Comment obtenir l'effet d'actualisation déroulante et de chargement pull-up de la liste dans l'applet WeChat ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!