如何在Next Js(React)中实现adobe分析

我已经提出了在我构建的react js应用程序中添加adobe分析的要求。

请向我道歉，我对如何实施它没有任何基本的想法/理解，所以专家的帮助对我很有帮助。

要求是我需要在我构建的next js with typescript项目中实现adobe分析。

我只能在官方文档中找到谷歌分析样本，但不能在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但它没有提供关于代码内部实现的必要细节。

在此处引发查询：https://github.com/zeit/next.js/discussions/10679但我无法从任何人那里得到适当的帮助。。

正如问题标题所示，我需要adobe analytics实现，而严格来说不需要谷歌分析。。

我的请求很谦虚，请通过分叉上述具有工作条件的代码沙盒来提供解决方案。

步骤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.jsnext/head模块将其包含在每页中。以下是将其包含在Next.js的<Head>模块中的代码。(确保AppMeasurement.js的路径适合每个页面。(

import Head from 'next/head';
export default () => {
....
<Head><script src="AppMeasurement.js"></script></Head>
....
}

我自己没有使用Adobe Analytics，认为它是一项付费服务。但曾与其他几个基于JS的分析平台合作。我认为上述程序应该有效。如果遇到任何问题，请告诉我。

参考文献：

JS实现
插入代码
有关将JSX添加到标头的详细信息
https://docs.adobe.com/content/help/en/analytics/implementation/other/dtm/t-analytics-deploy.html
https://docs.adobe.com/content/help/en/analytics/implementation/launch/overview.html

如果你是服务器端渲染，难道不可能只从Adobe后期渲染中删除一行吗？"Adobe体验平台发布：实现Adobe Analytics的标准化和推荐方法。在每个页面上放置一个加载器标签，并使用Launch的接口来确定如何定义每个变量"；来自Adobes文档https://experienceleague.adobe.com/docs/analytics/implementation/home.html#key-分析实现文章

理想情况下，您不想花时间将nextJS代码与Adobe交织在一起，只需使用单独的工具来捕获事件

您将如何在静态页面上实现Adobe？

您最好的资源将是nextjs存储库中的examples目录。

检查谷歌分析的实施，你可以得到一个基本的想法，如何做到这一点。

但总结一下，你需要：

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))

附言：如果你没有自定义的_app和_document页面，你可能需要创建它们

相关内容

最新更新

热门标签：