Atlas

Atlas Help Center

New Ticket

To install the Atlas snippet on a Next.js site:

import Script from "next/script";
const AtlasSnippet = () => (
    <Script id="atlas-snippet">{`(()=>{"use strict";var t,e={appId:"YOUR-APP-ID",v:2,autorun:{},q:[],call:function(){this.q.push(arguments)}};window.Atlas=e;var n=document.createElement("script");n.async=!0,n.src="https://app.atlas.so/client-js/atlas.bundle.js";var s=document.getElementsByTagName("script")[0];null===(t=s.parentNode)||void 0===t||t.insertBefore(n,s)})();`}</Script>
);

// omit this block if you don't use TypeScript
declare global {
  interface Window {
    Atlas: any;
  }
}


From the location in your code where you handle authentication, call the following method for logged-in users:

  window.Atlas.call("identify", {
    userId: '123',
    name: 'John Doe',
    email: 'john@example.com',
   })

 for a full list of available fields you can use in the identify call.

Next.js

Wix support adding Atlas snippet as a global custom code, similar to marketing or analytics tools.

 via the left hand side nav (closer to bottom)

This setup requires additional steps in order to supply a user details to Atlas.

Follow the steps for Simple sites with the code piece below

This step is sending a user details object from Wix Javascript environment to a browser environment where Atlas widget operates.

. This file executes on Wix servers before every page of your site. 

The code is specifically built with separate functions. In case you already have any code running in 

import { authentication, currentMember } from "wix-members-frontend";
import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {
  // some code may already be here

  startAtlasBridge();
});

function startAtlasBridge() {
  if (authentication.loggedIn()) {
    notifyLogIn(currentMember, "PAGE_LOAD");
  }

  authentication.onLogin((updatedCurrentMember) => {
    notifyLogIn(updatedCurrentMember, "LOGGED_IN");
  });
}

function notifyLogIn(currentMember, event) {
  currentMember
    .getMember()
    .then((member) => {
      wixWindowFrontend.postMessage({
        channel: "Atlas",
        event,
        identityParams: buildIdentityParams(member),
      });
    })
    .catch((error) => {
      console.error(error);
    });
}

function buildIdentityParams(member) {
  const userId = member._id;
  let name = [member.contactDetails?.firstName, member.contactDetails?.lastName]
    .filter(Boolean)
    .join(" ")
    .trim();
  if (name === "") {
    name = member.profile.nickname;
  }

  // do not pass empty keys
  const params = { userId, name };

  const email = member?.loginEmail || member.contactDetails?.emails[0];
  if (email) {
    params.email = email;
  }

  if (member.contactDetail?.phones?.length) {
    params.phoneNumber = member.contactDetails.phones[0];
  }

  return params;
}

In your Google Tag Manager account, go to 

Add the following code snippet to the HTML block:

You need to have user fields set up as variables and 

 event set up as a trigger. Usually, your engineering team will pass variables and events to GTM via the data layer.

. Add the following code snippet to the HTML block and modify variable names accordingly:

Setting up Atlas on other platforms