Что такое правдоподобно?
Правдоподобный позиционирует себя как легковесную веб-аналитику с открытым исходным кодом. Авторы могут сказать это лучше всего
«Мы стремимся сделать веб-аналитику более удобной для конфиденциальности. Наша миссия — уменьшить корпоративную слежку, предоставив альтернативный инструмент веб-аналитики, не относящийся к миру AdTech. Постоянная команда состоит из Уку Тахта и Марко Шарика. Мы полностью независимы, самофинансируемы и самофинансируемы».
Правдоподобный — это невероятная альтернатива Google Analytics, которая не собирает личную информацию.
Установка с правдоподобным
Способ установки Plausible на ваш Next.js довольно прост и удобен. Разработчики сделали его просто идеальным.
Есть два варианта запустить вашу правдоподобную аналитику.
Следующий/Заголовок файла документа.
Проходя регистрацию вы получите этот скрипт
<script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>
Для продолжения необходим файл Custom `Document`. Как только он у вас заработает, добавьте его в Head
import Document, {Html, Head, Main, NextScript} from 'next/document' class MyDocument extends Document { render() { return ( <Html> <Head> <base href="/"></base> <script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script> </Head> <body> <Main/> <NextScript/> </body> </Html> ) } } export default MyDocument
Это все, что вам нужно сделать, чтобы настроить его.
Библиотека NextJS
4lejandrito сделал отличный инструмент для подключения вашей аналитики правдоподобия к NextJS.
пряжа добавить следующий правдоподобный
npm install next-правдоподобно
Важно: если вы используете версию NextJS ниже 11.1.0, используйте
следующий-правдоподобный@2
Пользовательское приложение должно быть создано и настроено для использования метода на всех ваших страницах.
import PlausibleProvider from "next-plausible"; function MyApp({ Component, pageProps }) { return <PlausibleProvider domain="<Your domain>"> <Component {...pageProps} /> </PlausibleProvider> } export default MyApp
Пользовательские события
Правдоподобный позволяет нам отслеживать любую информацию. Это могут быть лайки постов, счетчики и любые данные, которые вы считаете важными.
Мы можем использовать крючок, они предоставляют такой
import {usePlausible} from 'next-plausible' export default PlausibleButton() { const plausible = usePlausible() return ( <button onClick={() => plausible('customEventName')}> Send </button> ) }
Поиск неисправностей
Имейте в виду, что, как и в любом скрипте отслеживания, если у пользователя установлено расширение блокировки отслеживания — вы не получите никаких результатов.
Я указываю это, потому что я трачу целых 10 минут, прежде чем я понял, почему в Chrome это не работает, а только в Firefox (где у меня не было установленных расширений конфиденциальности)
Дополнительную информацию можно найти в официальной документации здесь
Ссылки