Связать сайт и заказы в TimePad

Эта статья будет полезна, если перед вами встала одна или несколько задач из этого списка:

  1. Вы хотите объединить данные из своего счетчика Google Analytics с данными об участниках из TimePad, чтобы отслеживать поведение пользователя от первого посещения до получения билета
  2. У вас есть партнеры, которые ведут трафик на ваш сайт с формой продажи билетов и вам нужно знать, какой партнер привел ту или иную продажу
  3. Вы используете рекламную систему, которая размечает трафик по своим правилам и вам нужно научить TimePad распознавать эти источники трафика и привязывать их к билетам
  4. Вы развиваете на своем сайте личный кабинет, частью которого является виджет покупки билета через TimePad и вам нужно передать в TimePad информацию о том, какой пользователь сделал тот или иной заказ

Другими словами - вам нужно со своего сайта передать в TimePad какой-то идентификатор текущего пользователя, чтобы он появился в выгрузках списка билетов.

Самый простой способ сделать это – записывать нужные данные в скрытый вопрос формы регистрации. В этом случае пользователь не будет видеть вопрос, но при этом ответы на него с нужными данными появятся во всех выгрузках и интерфейсах TimePad и их можно будет анализировать.

Внимание
Этот способ сработает только в том случае, если вы регистрируете участников на своем сайте и используете наш виджет регистрации/продажи билетов. Для того, чтобы настроить такое поведение на странице события TimePad, обратитесь в службу поддержки по почте support@timepad.ru

Для начала создайте у события, к которому привязан виджет, необязательный вопрос типа "Короткий произвольный ответ". Проще всего назвать его "Реферал". По этому названию мы будем искать вопрос, чтобы записать в него данные. Дальнейшая инструкция предполагает, что вопрос озаглавлен именно "Реферал".

image

Затем необходимо скрыть этот вопрос в виджете.

Возьмите код вашего виджета в системе.

С помощью механизма внедрения дополнительного поведения в виджет скройте этот вопрос и впишите в него нужное значение.

Например, для демо-события код будет выглядеть так:

<script type="text/javascript">
    (function (window) {
        // В эту функцию мы напишем код, который возвращает метку, которая будет записана в заказ
        var getRefererMark = function (widget, cb) {
            cb("Реферальная метка тут");
        };

        var handleAttendeeQuestion = function (widget, attendee) {
            // Находим вопрос в модели по его названию
            var ref_question = TWF2.Collections.A.whereSingle(attendee.questionsSet, function (q) {
                return q.name == "Реферал"
            });

            if (ref_question) { // если нашли
                var $input = widget
                        .$$("[data-formname='" + ref_question.formname + "']") // то находим его на странице
                        .hide() // прячем
                        .find('input'); // ищем в нём поле ввода

                // и прописываем метку
                getRefererMark(widget, function (val) {
                    $input.val(val);
                });
            }
        };

        // вешаем обработчик на каждую перерисовку формы
        window.handleTWFpostRepaint = function (e) {
            if (this.model.attendees.length) {
                handleAttendeeQuestion(this, this.model.attendees[0]);
            }
        };

        // вешаем обработчик на добавление новых форм участников (если у события используются мультианкеты)
        window.handleTWFattendeeFormAdded = function (e) {
            handleAttendeeQuestion(this, e.attendee);
        };
    })(window);
</script>

<!-- ВНИМАНИЕ!!! Код ниже предназначен для НАШЕГО демо-события, код вашего события будет отличаться! Возьмите за основу ВАШ код, и добавьте в него настройки из примера (bindEvents) -->

<a href="https://demo.timepad.ru/event/246609/" data-twf-placeholder="yes">Перейти к заказу билетов</a><script type="text/javascript" defer="defer" charset="UTF-8" data-timepad-customized="АЙДИ_ВАШЕЙ_КАСТОМИЗАЦИИ" data-twf2s-event--id="АЙДИ_ВАШЕГО_СОБЫТИЯ" data-timepad-widget-v2="event_register" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
    (function() {
        return {
            "bindEvents": {
                "postRepaint": "handleTWFpostRepaint",
                "attendeeFormAdded":  "handleTWFattendeeFormAdded",
            }
        };
        })();
</script>

Остается только определить, что именно будет записываться в поле и соответствующим образом модифицировать функцию getRefererMark.

Google Analytics clientId

Счетчик Google Analytics помечает каждого пользователя уникальным идентификатором, который не теряется от сессии к сессии. Этот идентификатор называется clientId и его очень удобно использовать для объединения данных из GA и любой другой системы. По записанному в заказе clientId всегда можно восстановить историю посещения данным пользователем сайта.

Чтобы его вытащить из GA и передать в виджет функцию getRefererMark нужно модифицировать так:

// Google Analytics clientId
var getRefererMark = function (widget, cb) {
    widget.gaLoad(function (ga) {
        ga(function (tracker) {
            cb(tracker.get('clientId'));
        });
    });
};

Произвольные метки источников трафика

Допустим, вы используете рекламную систему, которая не использует стандартные UTM метки, а все источники трафика помечает параметром utm_exref (метка может быть любая, в данном случае важен сам принцип). Нам нужно вытащить значение этого параметра и привязать к заказу.

image

Этот код позволит не только вытащить и записать значение этой метки, но и запомнить ее в cookie пользователя, чтобы при следующем посещении (даже из другого источника трафика) подставилось именно первое записанное значение:

// обработка хвоста &utm_exref=some_refcode
var getRefererMark = function (widget, cb) {
    var mark = "exref",
        refCode = widget.getUtms(document.location.search)[mark] || TWF2.Util.Cookies.getCookies()['utm_' + mark];

    if (!refCode && document.location.href.search(widget.context.baseDomain) >= 0) {
        refCode = "TimePad";
    }

    if (refCode) {
        cb(refCode);

        var cdate = new Date();
        cdate.setFullYear(cdate.getFullYear() + 1);

        TWF2.Util.Cookies.setCookie("exref", refCode, cdate)
    }
};