How to implement adobe analytics in next.js or react.js?

@cameron_walter 

To implement Adobe Analytics in a Next.js or React.js application, you can follow these steps:

1. Get the Adobe Analytics Tracking ID: Sign in to Adobe Analytics and create a new report suite if you haven't already. Then, copy the Tracking ID for your report suite.
2. Install the Adobe Analytics script: In your Next.js or React.js project, add the Adobe Analytics script to your HTML document. You can do this by creating a new file called adobe-analytics.js or similar and placing it in your public or static folder. The script should look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

window.digitalData = {
  pageInstanceID: '',
  page: {
    pageInfo: {
      destinationURL: window.location.href,
      referringURL: document.referrer,
    }
  }
};

(function(a, b, c, d) {
  a = '//assets.adobedtm.com/d8eef8719df7bcba0c42bb45969a02c1bb8dd7db/satelliteLib-d8eef8719df7bcba0c42bb45969a02c1bb8dd7db.js';
  b = document;
  c = 'script';
  d = b.createElement(c);
  d.src = a;
  d.async = true;
  b.body.appendChild(d);
})();

1. Include the script in your pages: In your Next.js or React.js pages where you want Adobe Analytics to be active, import the script by adding the following line at the top of your file:

1

import '~/adobe-analytics.js';

1. Initialize Adobe Analytics: To track pageviews and events, you need to initialize Adobe Analytics in your application. You can create a new function called initializeAnalytics or similar and call it in your main layout component or wherever appropriate. The function should look like this:

1
2
3
4

export const initializeAnalytics = () => {
  window._satellite.pageBottom();
  // Add any additional custom implementation or configurations here
};

1. Use the initializeAnalytics function: Call the initializeAnalytics function in your main layout component or wherever you want to initialize Adobe Analytics. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React, { useEffect } from 'react';
import { initializeAnalytics } from '~/adobe-analytics.js';

const Layout = ({ children }) => {
  useEffect(() => {
    initializeAnalytics();
  }, []);

  return (
    <div>
      {/* Your layout content */}
      {children}
    </div>
  );
};

export default Layout;

By following these steps, you should be able to successfully implement Adobe Analytics in your Next.js or React.js application and start tracking pageviews and events. Remember to replace '~/adobe-analytics.js' with the correct path to your adobe-analytics.js file if it is located in a different location.