Haz un contador de visitas con google analytics

mar, 10 ene 2023

No es necesario hacer un sistema complejo para contar las vistas de tu blog. Puede usar Google Analytics para hacerlo, no necesita conservar los datos en una base de datos.

Aquí no explicamos cómo crear una cuenta de Google analytics, puedes seguir este tutorial para hacerlo.

1. Crea tu api para obtener los datos usando la clase BetaAnalyticsDataClient

.analytics.ts

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
    const { query } = req;
    const { slug = '/' } = query;
    const analyticsDataClient = new BetaAnalyticsDataClient({
        credentials: {
            client_email: process.env.ANALYTICS_CLIENT_EMAIL,
            private_key: process.env.ANALYTICS_PRIVATE_KEY?.replace(/\\n/g, '\n'),
        },
        projectId: process.env.ANALYTICS_PROJECT_ID,
    });
    const [response] = await analyticsDataClient.runReport({
        property: `properties/348472560`,
        dateRanges: [
            {
                startDate: '2023-01-01',
                endDate: 'today',
            },
        ],
        dimensions: [
            {
                name: 'date',
            },
            {
                name: 'pagePath',
            },
        ],
        metrics: [
            {
                name: 'screenPageViews',
            },
        ],
        dimensionFilter: {
            filter: {
                fieldName: 'pagePath',
                stringFilter: {
                    matchType: 'EXACT',
                    value: slug.toString(),
                },
            },
        },
        orderBys: [
            {
                dimension: {
                    dimensionName: 'date',
                },
            },
        ],
    });
    if (!response || !response.rows) {
        res.status(500).json({ error: 'Error while parsing analytics data' });
        return;
    }
    let total = response.rows.reduce((prev: Object, curr: Object) => {
        return prev + parseInt(curr.metricValues[0].value, 0);
    }, 0);
    try {
        res.status(200).json({ total });
    } catch (err: Error) {
        res.status(500).json({ error: err });
    }
}

2. Crea un componente para mostrar los datos

Puede crear un componente para consumir la API del cliente usando useEffect o desde una página que recupera los datos del servidor. Es tu elección

En mi caso voy a hacer 3 renders distintos, uno para cuando se está cargando, otro para el error y el último para la información.

ViewCounter.tsx

type Props = {
    children?: React.ReactNode;
};
const Container = ({ children }: Props) => {
    return (
        <div className={styles.views} title="Number of views in this post from Google analytics">
            <BsBook />
            {children}
        </div>
    );
};
const StarCounter = () => {
    const [views, setViews] = React.useState(-1);
    const { asPath } = useRouter();
    React.useEffect(() => {
        (async () => {
            try {
                const { total } = await fetch(`/api/analytics?slug=${asPath}`).then((res) => res.json());
                setViews(total);
            } catch (e) {
                setViews(-2);
            }
        })();
    }, [asPath]);
    if (views === -2)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error on endpoint" />
            </Container>
        );
    if (views === -1)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading views" />
            </Container>
        );
    return (
        <Container>
            <span>{views}</span>
        </Container>
    );
};
export default StarCounter;

3. Incluye tu componente donde quieras mostrarlo

Para ver el resultado del código anterior, solo mire la parte superior de la página y verá un ícono de libro con un contador en el lado derecho.

Puedes ver el código completo en mi repositorio si lo necesitas, y si te parece útil o te gusta puedes darme una estrella