问题描述
我已要求在我构建的react js应用程序中添加Adobe Analytics.
I have given the requirement to add adobe analytics in the react js application that I have built.
请向我道歉,我对如何实现它没有任何基本想法/理解,因此专家的帮助将对我非常有帮助.
Please apologize me that I don't have any basic idea/ understanding on how to implement it, So help from experts would be very helpful for me.
要求是我需要在内置的next js with typescript
项目中实施adobe分析..
Requirement is that I need to implement the adobe analytics in the next js with typescript
project that I have built in..
我只能在此处找到 google Analytics(分析)示例在官方文档中,但不是adobe.
I could find only google analytics sample here in official documentation but not adobe..
Index.tsx:
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的确切条件?
From the source code given in the link, please help me where should I start and how exactly should I need to implement Adobe Analytics?
我在 https://docs.adobe.com/content/help/zh-CN/experience-manager-65/developing/headless/spas/spa-ssr.html 但是它没有提供有关代码内部实现的必要细节.
I found the link for SSR here, https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html but it doesn't provide necessary details about implementation inside code.
在此处提出查询: https://github.com/zeit/next.js /discussions/10679 ,但我无法从任何人那里获得适当的帮助.
Raised a query here: https://github.com/zeit/next.js/discussions/10679 but I couldn't get the appropriate help from anyone..
就像问题标题所指示的那样,我需要 adobe analytics 实施,并且严格不需要google Analytics.
As like the question title indicates, I am in the need of adobe analytics implementation and strictly not google analytics..
我要求谦虚,请通过提供上述符合条件的代码和框来提供解决方案.
I humble request, please provide the solution by forking the above codesandbox with working condition.
推荐答案
步骤1:
下载AppMeasurement.js
文件.它不适用于来宾用户,但应适用于已登录的付费用户.来自此处有关如何下载文件的更多信息,请参见此处.
Download the AppMeasurement.js
file. It is not available for guest user but should be available for logged in paid user. from hereMore on how to download the file is available here.
第2步:在AppMeasurement.js
文件中定义配置变量.完整的细节在这里,但为方便起见,我将在此处复制.
Step 2:Define the configuration variables in the AppMeasurement.js
file. The complete details are here but I will reproduce here for convenience.
更改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
模块将其包含在每页中.以下是将其包含在Next.js的<Head>
模块中的代码. (确保AppMeasurement.js
的路径适用于每个页面.)
Then add them to your <head>
of the document. You can do this by adding it to the _document.js
file. Or include it per page using the Next.js next/head
module. The following is the code to include it in the <Head>
module of Next.js. (Ensure that the path of AppMeasurement.js
is appropriate for each page.)
import Head from 'next/head';
export default () => {
....
<Head><script src="AppMeasurement.js"></script></Head>
....
}
我没有使用Adobe Analytics,因为它是一项付费服务.但是已经与其他几个基于JS的分析平台一起使用.我认为上述程序应该可行.让我知道是否遇到任何问题.
I have myself not used Adobe Analytics considering it to be a paid service. But have worked with several other JS based analytics platforms. I think the above procedure should work. Let me know if face any issue.
参考文献:
- JS实现
- 插入代码
- 有关将JSX添加到标头的更多信息
- https://docs.adobe.com/content/help/zh-CN/analytics/implementation/other/dtm/t-analytics-deploy.html
- https://docs.adobe.com /content/help/zh-CN/analytics/implementation/launch/overview.html
- JS Implementation
- Inserting the code
- More about adding JSX to header
- 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
这篇关于如何在Next Js(React)中实施Adobe Analytics?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!