9 javascript adobe-analytics reactjs react-native next.js
我已经要求在我构建的 react js 应用程序中添加 adobe 分析。
请向我道歉，我对如何实施它没有任何基本的想法/理解，因此专家的帮助对我非常有帮助。
要求是我需要在next js with typescript我内置的项目中实现adobe analytics ..
我只能在官方文档中找到谷歌分析示例，但在 adobe 中找不到。
索引.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但它没有提供有关代码内部实现。
在此处提出查询：https : //github.com/zeit/next.js/discussions/10679但我无法从任何人那里获得适当的帮助..
正如问题标题所示，我需要adobe 分析实施，而不是谷歌分析。
我谦虚的请求，请通过分叉上述具有工作条件的代码和框来提供解决方案。
步骤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 的分析平台合作过。我认为上述程序应该有效。如果遇到任何问题请告诉我。
参考 ：
Ita*_*res -1
您最好的资源将是nextjs 存储库中的示例目录。
检查Google Analytics 实施情况，您可以了解如何执行此操作的基本想法。
但总结来说，你需要：
1) 将分析脚本添加到 _document.js 页面的 Head 组件中
<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 页面上的页面更改事件，并使用您的分析库 api 手动触发该操作。
Router.events.on('routeChangeComplete', url => gtag.pageview(url))
ps：如果您没有自定义_app 和 _document 页面，您可能需要创建它们
| 归档时间： |
|
| 查看次数： |
2460 次 |
| 最近记录： |