Skip to content
Frend Front

Depict DPC

Installation

The following are the installation instructions for Next.js

Terminal window
pnpm add @frend-digital/events @depict-ai/dpc

Whats handled out of the box?

By using the depictAdapter (detailed below), Depict event handling for ALL centra events is handled automatically. This includes:

  • add_to_cart
  • purchase

No additional configuration is required for events to be published to Depict. Simply use the packages as normal.

Usage

Initialize your DPC adapter

In a file such as events.tsx, add the DPC adapter

import { EventSubscription } from "@frend-digital/events/client";
import { depictAdapter } from "@frend-digital/events/depict";


export const Events = () => {
  const [adapters] = useState(() => [depictAdapter("merchant-xyz")]);
  return <EventSubscription adapters={adapters} />;
};

Render the event subscription

In your RootLayout file, render the Events component, make sure to lazy load it.

import { GoogleTagManager } from "@next/third-parties/google";
import dynamic from "next/dynamic";


const Events = dynamic(() => import("./events"));


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Events />
    </html>
  );
}