Как реализовать аналитику Adobe в Next Js (React)? - PullRequest
Новая
       48

Как реализовать аналитику Adobe в Next Js (React)?

7 голосов
/ 24 февраля 2020

Я дал требование добавить аналитику Adobe в созданное мной приложение реагирования js.

Пожалуйста, извините меня, что у меня нет какой-либо базовой идеи или понимания о том, как реализовать его, поэтому помощь экспертов будет очень полезна для меня.

Требование заключается в том, что мне нужно реализовать аналитику Adobe в проекте next js with typescript, который я встроил.

I можно найти только образец Google Analytics здесь в официальной документации, но не Adobe.

Полный пример кода рабочего приложения здесь ...

Index.tsx: 

import React from "react";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import Link from "../src/Link";

export default function Index() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Next.js with TypeScript example
        </Typography>
        <Link href="/about" color="secondary">
          Go to the about page
        </Link>
      </Box>
    </Container>
  );
}

Из исходного кода, приведенного в ссылке, пожалуйста, помогите мне с чего начать и как именно мне нужно для реализации Adobe Analytics ?

Я нашел здесь ссылку для SSR , https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html, но она не дает необходимых сведений о реализации внутри кода.

Raised запрос здесь: https://github.com/zeit/next.js/discussions/10679 но я не смог получить соответствующая помощь от кого-либо ..

Как видно из названия вопроса, мне нужна реализация Adobe Analytics и строго не Google Analytics ..

Я смиренно прошу, пожалуйста, предоставьте решение, разветвив вышеуказанные коды и коробку в рабочем состоянии.

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

Шаг 1:

Загрузите файл AppMeasurement.js. Он недоступен для гостевого пользователя, но должен быть доступен для зарегистрированного платного пользователя. с здесь Подробнее о том, как загрузить файл, можно узнать здесь .

Шаг 2: Определить переменные конфигурации в файле AppMeasurement.js , Полная информация здесь, но я воспроизведу здесь для удобства.

Измените userID и trackingServer. 

var s_account = "examplersid"; // Change this
var s=s_gi(s_account); // Instantiation
s.trackingServer = "example.omtrdc.net"; // Change this

// Page Level variables

s.pageName = "Example page";
s.eVar1 = "Example eVar";
s.events = "event1";

Шаг 3:

Затем добавьте их в <head> из документ. Вы можете сделать это, добавив его в файл _document.js. Или включите его на страницу, используя модуль Next. js next/head. Ниже приведен код для включения его в модуль <Head> из Next. js. (Убедитесь, что путь AppMeasurement.js подходит для каждой страницы.) 

import Head from 'next/head';

export default () => {
....
  <Head><script src="AppMeasurement.js"></script></Head>
....

}

Я сам не использовал Adobe Analytics, считая его платным сервисом. Но работали с несколькими другими аналитическими платформами JS. Я думаю, что вышеуказанная процедура должна работать. Дайте мне знать, если возникнут какие-либо проблемы.

Ссылки:

  1. JS Реализация
  2. Вставка кода
  3. Подробнее о добавлении JSX в заголовок
  4. https://docs.adobe.com/content/help/en/analytics/implementation/other/dtm/t-analytics-deploy.html
  5. https://docs.adobe.com/content/help/en/analytics/implementation/launch/overview.html
0 голосов
/ 24 февраля 2020

Вашим лучшим ресурсом будет каталог examples в следующем js репозитории .

Проверьте реализацию Google Analytics , и вы можете получить основную c идею о том, как это сделать.

Но в итоге вам необходимо:

1) Добавьте скрипт аналитики в компонент Head в _document. js Page 

<Head>
{/* Global Site Tag (gtag.js) - Google Analytics */}
  <script
    async
    src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${GA_TRACKING_ID}', {
      page_path: window.location.pathname,
    });
  `,
    }}
  />
</Head>

2) Прослушайте событие изменения страницы на _app. js Page и вручную запустите действие с помощью своей библиотеки аналитики api. 

Router.events.on('routeChangeComplete', url => gtag.pageview(url))

ps: если у вас нет пользовательских _app и _document страниц , вам может понадобиться создать их

...