How To Set Up Consent Configuration for AesirX CMP JS

Step 1: Setup First-Party Server

What is This?

AesirX First-Party Server is your own server for storing analytics data from your websites, powered by AesirX Analytics.

Technically, you will need Docker Compose to run the AesirX First-Party Server Docker image, which stores your website consent data in a MongoDB server (included in the Docker Compose file).

Technical Requirements:

Docker
Docker Compose. Setup instructions

Optional Technical Requirements:

You can specify your own MongoDB server for storing consent data. MongoDB 6.x is required.

Instructions for Setting Up:

1. Pull the Source Code

Clone the source code from the AesirX GitHub repository using the cmp branch:

git clone -b cmp https://github.com/aesirxio/analytics-1stparty.git

2. Clone and Customize the aesirx-1stparty.env File

Clone the aesirx-1stparty.env.dist file into aesirx-1stparty.env and customize it as needed:

cp aesirx-1stparty.env.dist aesirx-1stparty.env

Customization options:

If you have a separate MongoDB server, specify the credentials using these variables:

DBUSER
DBPASS
DBHOST
DBPORT
DBNAME

You can also change the HTTP_PORT variable (default is 80). Note that this is the port inside the container, and it is generally recommended not to change it.

Add the admin SoP IDs after the variable and separate them with commas, for example: ADMIN_SOP="@admin_1,@admin_2,...".

3. Clone and Customize the .env File

Clone the .env.dist file into .env and customize it as needed:

cp .env.dist .env

You can customize your ports:

HTTP_PORT: published port of the server. If you want your server to listen to a different port, this is the configuration that you need to change.
MONGO_PORT: published port for MongoDB

You can customize your DB settings (they need to be the same as in the aesirx-1stparty.env file).

MONGO_INITDB_ROOT_USERNAME
MONGO_INITDB_ROOT_PASSWORD
MONGO_INITDB_DATABASE

4. Run

After configuring the files, execute the following command to run the setup, including the MongoDB server:

{code}dockerComposeNoBuild(/code}

This will start the server in detached mode, and your AesirX First-Party Server will be ready to store consent data.

Step 2: Setup CMP Admin

1. Install CMP admin:

git clone https://github.com/aesirxio/cmp-admin

2. Update env

At aesirx-cmp-admin folder rename the .env.dist file to .env and replace the placeholder keys with your own keys.

REACT_APP_BI_ENDPOINT_URL=[Replace with URL of First-Party Server in step previous step]
REACT_APP_ENDPOINT_ANALYTICS_URL=[Replace with URL of First-Party Server in previous step]
REACT_APP_DATA_STREAM=[{"name": "Domain name", "domain": "example.com"},{"name": "Domain name 2", "domain": "example2.com"}]
REACT_APP_SSO_CLIENT_ID=[Replace with the provided SSO_CLIENT_ID]
REACT_APP_SSO_CLIENT_SECRET=[Replace with the provided SSO_CLIENT_SECRET]

3. Install & build dependencies:

At cmp-admin folder:

Get all submodule source code required for the project.

git submodule update --init --recursive

Install the dependencies.

yarn install

Build the dependencies.

yarn prepare

4. Run App

Run on webserver
1. Build app

yarn build

1. Upload packages/aesirx-cmp-admin/build folder to webserver
Dockerize

docker compose -f "docker-compose.yml" up -d --build

Step 3: Install Standalone CMP

Usage in SSR sites

Download consent.js from https://github.com/aesirxio/consent/releases/latest
Copy consent.js into your project.
Add the following scripts inside the tag:

<script>
  window.aesirx1stparty = "https://example.com"
</script>
<script async defer src="YOUR_PROJECT_PATH/consent.js"></script>

https://example.com is the URL of your installed First-Party Server in step 1.

Usage in React

Install aesirx-consent package

yarn add aesirx-consent

Add the environment variables to your .env file:

REACT_APP_ENDPOINT_ANALYTICS_URL=https://example.com

(https://example.com is the link to your 1st party server)

With react-router-dom v5

Create a ConsentContainer component:

import React from "react";
import { ConsentReact } from "aesirx-consent";
const ConsentContainer = ({ children }) => {
  return <ConsentReact>{children}</ConsentReact>;
};
export default ConsentContainer;

Wrap your component with ConsentContainer

<ConsentContainer>
 <YourComponent />
</ConsentContainer>

Usage in Nextjs

Install aesirx-consent package

yarn add aesirx-consent

Add the environment variables to your .env file:

NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL=https://example.com

(https://example.com is the link to your 1st party server)

With next/router

Add this in _app.js:

import { ConsentNext } from "aesirx-consent";
function MyApp({ Component, pageProps }) {
  return (
    <ConsentNext>
      <Component {...pageProps} />
    </ConsentNext>
  );
export default MyApp;

Now that your CMP is installed and configured, you can start adding vendor integrations.

AesirX CMP Guide: How to Integrate Web Vendors (Top 25)

Enjoyed this read? Share the blog!

TABLE OF CONTENTS

How To Set Up Consent Configuration for AesirX CMP JS