Решение для статистики данных одностраничного приложения Front-end SPA (ReactJS / VueJS)

Байду внешний интерфейс Vue.js React.js

Решение для статистики данных одностраничного приложения Front-end SPA (ReactJS / VueJS)

1. Код статистики Baidu: возможны проблемы со статистическим методом UV PV

Статистика во фронтенд-проекте SPA часто хлопотная штука, то же самое верно и для React и Vue. Прежде чем мы найдем проблему, мы должны подумать о статистике Baidu.统计原理что это такое?

1-1: Статистический код Baidu

   var _hmt = _hmt || [];
   (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?xxx";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
   })();

JS-файл статистики Baidu загружается через JSONP.Этот JS-файл относительно большой. Грубый взгляд на файл исходного кода hm.js, получение локального файла cookie, сеанса, URL-адреса, ua и т. д., а также некоторые методы обработки данных и некоторые методы загрузки данных.

那么在什么情况下，百度统计 会去触发上传的操作？

Давайте поэкспериментируем?

  • 1. Это обязательно будет срабатывать при каждом обновлении страницы.
  • 2. Вызовет ли это перенаправление на следующую новую страницу? (подлежит проверке)
  • 3. Будет ли срабатывать маршрут возврата на старую страницу? (подлежит проверке)

Ниже: мы реализуем сцену для проверки, чтобы увидеть, сработает ли она.

1-2: Добавьте в проект реактивный маршрутизатор

const GetBaidu = props => {
  let children = props.children;
  let _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxx";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  return children;
};

const App = () => {
  return (
    <div>
      <h2>测试百度统计代码</h2>
      <h3>
        <Link to={"/"}>Index</Link>
      </h3>
      <h3>
        <Link to={"/home"}>Home</Link>
      </h3>
      <h3>
        <Link to={"/my"}>my</Link>
      </h3>

      <Switch>
        <GetBaidu>
          <Route exact path="/" component={Index} />
          <Route exact path="/home" component={Home} />
          <Route exact path="/my" component={My} />
        </GetBaidu>
      </Switch>
    </div>
  );
};

Это похоже на перехватчик, и код статистики Baidu снова перемещается перед скачком маршрутизации.

Точно так же проект Vue-router похож.

1-3: Добавьте Vue-маршрутизатор в проект

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);
} );

Вот просто простой и грубый демонстрационный дисплей Протестирование таких данных и статистические задачи необходимо решать во многих проектах.

Резюме: методы React и Vue аналогичны, и операция перехвата выполняется перед переходом маршрута. Добавьте методы и статистические коды, которые необходимо добавить на страницу.

Здесь представлена ​​статья о статистике данных одностраничных приложений, приглашаем обсудить ее вместе~

Адрес GitHub: (добро пожаловать в звезду, добро пожаловать, чтобы порекомендовать:)

Решение для статистики данных одностраничного приложения Front-end SPA (ReactJS / VueJS)

Категории