External Links Query Params

Описание

Инструментарий для работы с cookies и UTM метками. Обычно применяются для сохранения UTM меток из GET запроса к странице в cookies и подставления потом их в во внешние ссылки с лендинга на карточки курсов.

Состав

Состоит из базового набора работы cookies:

• setCookie - установить cookie,
• getCookie - получить cookie,
• eraseCookie - удалить,
• getCookiesMap - получить маппинг всех cookies

Как это работает

При заходе посетителя на сайт UTM метки сохраняются в cookies. При формировании ссылок курсов эти метки парсятся и подставляются в query для дальнейшего анализа статистики аналитиками заказчика.

Как сохранить UTM метки

В зависимости от проекта, есть следующие варианты.

Работа пакета начинается с записи всех UTM меток из GET запроса к приложению в куки. В корне приложения, компоненте, который рендерится всегда (в next.js (SSR) это _document или _app, в CRA(CSR) это какой-нибудь index.js), должна быть вызвана функция saveUtmToCookies, в которую нужно передать предварительно распарсенный при помощи getCookiesMap объект cookies.

Для create-react-app приложения можно реализовать провайдер, пример ниже:

App.js

import React from 'react';
import { BrowserRouter as Router, withRouter } from 'react-router-dom';
import './sass/styles.scss';
import { RoutesContainer } from './router';
import { UTMTracker } from './components/UTMTracker';

function App({ history }) {
    return (
        <div className="App">
        <Router>
            <UTMTracker>
            <RoutesContainer history={history} />
            </UTMTracker>
        </Router>
        </div>
    );
}

UTMTracker провайдер

import React from 'react';
import { saveUTM } from '../utils';

export const UTMTracker = ({ children }) => {
React.useEffect(() => {
    saveUTM();
}, []);
    return <div>{children}</div>;
};

saveUTM

import * as queryString from 'querystring';
import { saveUtmToCookies } from '@humandone/utm-params';

export const saveUTM = () => {
    const parsed = queryString.parse(window.location.search.replace('?', ''));
    if (Object.keys(parsed).length) saveUtmToCookies({ params: parsed });
};

Для Next.js

В корневом компоненте нужно просто обернуть в хук

useEffect(() => {
    saveUTM();
}, []);

Где метод saveUTM точно такой же, как в предыдущем примере

Как добавить UTM метки к внешним ссылкам

Теперь, когда метки сохранены, нужно их добавить к ссылкам курсов. Подходы для CRA приложения и Next.js отличаются, так как в Next.js применяется Server Side Rendering, и, на момент рендера, у интерпретатора нет доступа к объекту document, window и другим, касающимся клиентской стороны, так что cookies он получает через response, прокинутыми с помощью getServerSideProps. Ниже описан метод получения этой ссылки

import {
    buildUrl as buildUrlWithUtmParams,
    getCookiesMap
} from '@humandone/utm-params';

export function buildCourseUrl({
    slug,
    cookies, // <- эти cookies в метод могут приходить как с document, так и с getServerSideProps
}) {
    const cookiesMap = getCookiesMap(cookies);
    const utmCookiesMap = {};

    // Здесь получаем все куки с приставкой utm_
    for (let key in cookiesMap) {
        if (key.includes('utm_')) {
        utmCookiesMap[key] = cookiesMap[key];
        }
    }

    const host = `https://skillbox.com.ua`;
    let url = host;
    url += `${slug}`;

    // Вызываем метод из библиотеки, который собирает нам полный href курса
    return buildUrlWithUtmParams({
        url: url,
        params: utmCookiesMap,
    }).replace(host, '');
}