Что такое правдоподобно?

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

«Мы стремимся сделать веб-аналитику более удобной для конфиденциальности. Наша миссия — уменьшить корпоративную слежку, предоставив альтернативный инструмент веб-аналитики, не относящийся к миру 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 (где у меня не было установленных расширений конфиденциальности)

Дополнительную информацию можно найти в официальной документации здесь

Ссылки

https://github.com/plausible/analytics