How to implement adobe analytics in Next Js (React )?

问题

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.

Requirement is that I need to implement the adobe analytics in the next js with typescript project that I have built in..

I could find only google analytics sample here in official documentation but not adobe..

The complete sample working application code here...

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

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?

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.

Raised a query here: https://github.com/zeit/next.js/discussions/10679 but I couldn't get the appropriate help from anyone..

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:

Step 1:

Download the AppMeasurement.js file. It is not available for guest user but should be available for logged in paid user. from here More on how to download the file is available here.

Step 2: Define the configuration variables in the AppMeasurement.js file. The complete details are here but I will reproduce here for convenience.

Change the userID and 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";

Step 3:

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

}

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.

References :

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

回答2:

Your best resource will be the examples directory in nextjs repository.

Check the Google Analytics implementation and you can get a basic idea on how to do it.

But summarizing, you need to:

1) Add analytics script to Head component in _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) Listen for page change event on _app.js Page, and manually trigger the action with your analytics lib api.

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

p.s.: If you don't have custom _app and _document pages you may need to create them

来源：https://stackoverflow.com/questions/60376041/how-to-implement-adobe-analytics-in-next-js-react

标签

javascript

reactjs

react-native

next.js

adobe-analytics