Думая о внешней схеме статистики скрытых точек

внешний интерфейс

Встраивание — это отслеживание поведения пользователя на уровне представления приложения, что очень важно для итерации продукта. Анализ данных о скрытых точках является требованием к продуктуисточник, чтобы убедиться, что функция работает должным образомсвидетельство. Внешний интерфейс ближе к пользователю, чем к серверу.Этот Сяобай объяснит здесь несколько вещей о плане статистики скрытых точек внешнего интерфейса.

Для сбора данных о закопанных точках можно провести следующий анализ (в качестве примера возьмем статистику Baidu):

будетСвойства пользователя,поведение пользователяПреобразование различных диаграмм визуализации:

Разные продукты обращают внимание на данные с разных сторон, которые можно собирать по запросу. Например, продукты информационных потоков уделяют больше внимания продолжительности пребывания (подсчет посещений страниц и времени отказов), торговые центры больше внимания уделяют «коэффициенту повторных покупок» (подсчет новых и старых пользователей), а реклама больше ориентирована на максимальную .

Статистика погребенных точек обычно делится на две категории:

  • статистика посещаемости страницы

  • Статистика кликов по функциям

статистика посещаемости страницы

Статистика посещаемости страниц обычно делится на две категории:

  • PV: количество посещений страницы

  • UV: количество посетителей страницы

Количество посещений страницы определяется не только привлекательностью ее содержания, к влияющим факторам относится входВнешний вид,Место расположения,глубинаи так далее (не учитывая здесь жестких потребностей). Внешний вид входа относится к сфере дизайна пользовательского интерфейса, расположение входа можно настроить, анализируя тепловую карту кликов пользователя, а глубину входа можно настроить, анализируя путь доступа пользователя.

пользовательские кликиТепловая картаВ форме:

Поместить запись основной страницы в красную область тепловой карты?

Зафиксировать загрузку страницыfrom,toЧтобы узнать путь доступа пользователя:

Анализ показывает, что пользователи, как правило,глубина доступа, на глубину и на страницуСкорость оттокаПодождите, настроить источник входа и глубину входа основной страницы в соответствии с результатами?

Просмотры страниц определяются не только дизайном продукта. Если PV стабилен в посещаемости страницырезко падать, вам нужно учитывать вероятность успешной загрузки (возможно, техническая ошибка).

Как реализовать глобальную статистику PV во внешнем интерфейсе, возьмем в качестве примера приложение Vue.

Вариант первый

Определив его глобально в файле ввода index.jsRouter.beforeEach:

import App from './app'
import Router from './router'

Router.beforeEach((to, from, next) => {
    App.logEvent({
        type: 'visit',
        name: to.name,
        time: new Date().valueOf(),
        params: {
            from: {
                name: from.name,
                path: from.path,
                query: from.query
            },
            to: {
                name: to.name,
                path: to.path,
                query: to.query
            }
        }
    })
    next()
})

Продолжительность пребывания может быть пройдена(время страницы перехода - время текущей страницы)Да, но как считать, когда приложение закрыто? Приложение мониторинга закрытьonbeforeunload + onunload?

вApp.logEventЭто метод в пользовательском приложении плагина Vue, который используется для запуска сервера.Запрос отчета о месте захоронения:

import Request from './utils/request'

const App = {
    // ...
    logEvent (opts) {
        Request({
            url: '/log/event',
            method: 'POST',
            data: {
                type: opts.type,
                name: opts.name,
                time: opts.time,
                params: opts.params || {}
            }
        })
    }
}
App.install = (Vue, options) => {
    Vue.prototype.$app = {
        // ...
        logEvent: App.logEvent
    }
}

export default App

Вариант 2

Путем глобальной регистрации миксина в файле ввода index.jsbeforeRouteEnter,beforeRouteLeaveОбъект:

import Vue from 'vue'

Vue.mixin({
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.$app.logEvent({
                type: 'visit',
                name: to.name,
                time: new Date().valueOf(),
                params: {
                    from: {
                        name: from.name,
                        path: from.path,
                        query: from.query
                    },
                    to: {
                        name: to.name,
                        path: to.path,
                        query: to.query
                    }
                }
            })
        })
    },
    beforeRouteLeave (to, from, next) {
        this.$app.logEvent({
            type: 'visit',
            name: to.name,
            time: new Date().valueOf(),
            params: {
                from: {
                    name: from.name,
                    path: from.path,
                    query: from.query
                },
                to: {
                    name: to.name,
                    path: to.path,
                    query: to.query
                }
            }
        })
        next()
    }
})

При закрытии приложенияbeforeRouteLeaveЭто срабатывает?

Вышеприведенная схема имеет явные недостатки:

  • Официально используйте объекты глобального микширования с осторожностью! ! !

  • Для одноименной функции хука на страницеbeforeRouteEnter,beforeRouteLeave,какmerge? какnext?

  • Страницы с дочерними маршрутами будут звонить2второсортныйbeforeRouteEnter,beforeRouteLeave, PV невидимые двойники...

Я предполагаю, что на данный момент есть глобальный миксинcreated,destroyedи черезthis.$routeЧеловек, которому пришла в голову идея объекта посещения, попробовать?

Подавляющий результат, печать столько раз, сколькотаблица маршрутизацииДлина одинаковая~

вthis.$app.logEvent(vm.$app.logEvent)Эквивалентная программа одинApp.logEvent,Больше никогда.

Как правильно выбрать схему глобальной статистики PV?

  • СПА-приложение: только одна запись, определенная глобально в файле записейRouter.beforeEachУдобно и реализуемо.

  • МПА-приложение: Несколько записей, определенных в каждом файле записейRouter.beforeEach? Он может инкапсулировать общую логику (притворяться одной записью), чтобы избежать затрат на повторное создание записи.

  • Гибридное приложение SPA + MPA:emmmmmm... Статистическая схема с использованием приложения MPA.

  • приложение ССР: в погоне за лучшимSEOВместо этого используйте рендеринг на стороне сервера (SSR). отJinja (шаблон Python)Например, вызовTemplateViewЭто страница рендеринга (в отличие от проектов разделения внешнего и внутреннего интерфейса, сервер не может знать соответствующую связь между вызовами интерфейса и рендерингом страницы) и подсчитывает количество вызовов иTemplateNameЗнай страницу PV.

Что касается УФ, собирается при подсчете PVuserIdПросто уберите вес. Если в приложении нет системы управления пользователями, соберитеIP,deviceIdUV также могут быть приблизительно известны (неточны).

Статистика кликов по функциям

Нажатия разных функций разные, и нажатия разных областей одной и той же функции тоже разные:

Количество нажатий кнопок, влияющие факторы включают кнопкиВнешний вид,Место расположения,Входи так далее (не учитывая здесь жестких потребностей). Внешний вид кнопки относится к категории дизайна пользовательского интерфейса.Положение кнопки можно настроить, проанализировав тепловую карту кликов пользователя, а вход кнопки можно настроить, проанализировав распределение источника триггера.

Возьмите пример:

Студенты-операторы разрезают изображение на n областей и нажимают на каждую область, чтобы рекомендовать различные продукты. Щелкните координаты статистической области и настройте сортировку продуктов в соответствии с тепловой картой, чтобы получитьМаксимизируйте преимущества.

Как во внешнем интерфейсе реализована функция статистики кликов?

Я разделяю функциональные клики на две категории:

  • С запросом бизнес-интерфейса

  • Нет запроса бизнес-интерфейса

Вариант первый

Отчет о скрытых точках смешивается с запросом бизнес-интерфейса, а клик без запроса интерфейса принимает пользовательский отчет:

вparam keysУказывает параметры бизнес-запроса, которые необходимо сообщитьkey list(Не все параметры необходимо сообщать со скрытой точкой).

Приведенная выше схема сильно экономит количество запросов, но есть явные недостатки:

  • Смешивание отчетов о скрытых точках в бизнес-интерфейсе и отчетов о сбоях не только приведет к потере статистических данных, но и повлияет на основную функцию.

  • Статистика и бизнесвысокое сцепление, постарайтесь не смешивать их в одном и том же сервисе.

Вариант 2

Рассматривайте все события кликов как один и тот же класс и используйте унифицированный интерфейс отчетности:

logEvent (opts) {
    Request({
        url: '/log/event',
        method: 'POST',
        data: {
            type: opts.type,
            name: opts.name,
            time: opts.time,
            params: opts.params || {}
        }
    })
}

Приведенная выше схема имеет и явные недостатки:

  • Объем запросов удваивается: однако после разделения статистики и бизнес-сервисов запросы не обрабатываются одной и той же группой серверов.

  • Все функции события щелчка, о которых необходимо сообщить, должны быть вызваныlogEvent: инкапсулировать пакет со скрытой точкой для отчетакомпоненты, используя Vue в качестве примера.

<template>
    <div class="vc-trace" @click="triggerClick">
        <slot></slot>
    </div>
</template>

<script>
import Request from './utils/request'

export default {
    name: 'Trace',
    props: {
        type: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        from: {
            type: String,
            default: ''
        },
        params: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        triggerClick () {
            Request({
                url: 'XXX/log/event',
                method: 'POST',
                data: {
                    type: this.type,
                    name: this.name,
                    from: this.from,
                    time: new Date().valueOf(),
                    params: this.params
                }
            })
        }
    }
}
</script>

В программе нет плюсов и минусов, важнее быть подходящей, что нужно рассматривать комплекснодизайн продукта,Использование продукта,использование услуги Т. Д. Например, приложения с низким уровнем использования могут совмещать статистику и бизнес в одном сервисе для экономии затрат, а приложения с высоким уровнем использования могут использоватьлокальный кеш,Пакетный отчетСнизить сервисное давление, но стоит ли увеличивать статистику в пакетной отчетностиошибка?

Эта статья — только верхушка айсберга, вы можете оставить сообщение для вашего ценного опыта~

19.12.2018 Продолжение

Видел несколько хороших статей:

Обсуждение проблемы потери статистических данных при переадресации страницы

Руководство по API жизненного цикла страницы

Автор: Глупое маленькое Мяу

мой задний сад:sunmengyuan.github.io/garden/

мой гитхаб:github.com/sunmengyuan

Оригинальная ссылка:Сунь Мэнъюань.GitHub.IO/garden/2018…

Категории