Scrivito Neoletter Tracking

Scrivito Neoletter Tracking library documentation. This guide provides detailed descriptions and usage instructions for each component and widgets available in the library. Our components and widgets are designed to provide tracking ability to the Scrivito based application.

Table of Contents

• Installation
• Initialization
• NeoletterTrackingProvider Component
• CookieConsentBanner Component
• UnconnectedCookieConsentBanner Component
• Neoletter Tracking Widget
• Neoletter Campaign Widget
• Neoletter Campaign Conditional Content Widget

Installation

Install the package into your scrivito app:

npm install scrivito-neoletter-tracking

Initialization

Import the initNeoletterTrackingWidgets function from the package and call it in your index.js file found in the Widgets folder (e.g., in src/Widgets/index.js).

import { initNeoletterTrackingWidgets } from "scrivito-neoletter-tracking"

initNeoletterTrackingWidgets()

Import the loadEditingConfigs function from the package and call it in your editingConfigs.js file also found in the Widgets folder.

import { loadNeoletterTrackingWidgetsEditingConfigs } from "scrivito-neoletter-tracking"

loadNeoletterTrackingWidgetsEditingConfigs()

Add the widget styles to your app. This can be done by either loading the CSS via css-loader (e.g. in src/index.js or src/Widgets/index.js):

import "scrivito-neoletter-tracking/styles.css"

Or by importing the styles into your stylesheets (e.g. in src/assets/stylesheets/index.scss):

@import "scrivito-neoletter-tracking/styles.css";

To ensure that all components and widgets related to tracking can access and manage the cookie consent state effectively, it's crucial to wrap them with the NeoletterTrackingProvider Component. Typically, this setup should be implemented in your main application file, such as src/App.js.

Below is an example of how to integrate the NeoletterTrackingProvider along with the UnconnectedCookieConsentBanner component:

import { UnconnectedCookieConsentBanner, NeoletterTrackingProvider } from "scrivito-neoletter-tracking";

<HelmetProvider>
  <ErrorBoundary>
    <NeoletterTrackingProvider>
      <UnconnectedCookieConsentBanner />

      <CurrentPage />
      <ScrivitoNotFoundErrorPage>
        <NotFoundErrorPage />
      </ScrivitoNotFoundErrorPage>
    </NeoletterTrackingProvider>
  </ErrorBoundary>
</HelmetProvider>

NeoletterTrackingProvider Component

Description:
The NeoletterTrackingProvider component is essential for managing cookie consent state across the application.

CookieConsentBanner Component

Description:
The CookieConsentBanner component is designed for integration with Scrivito. It uses the getObj function to fetch content dynamically based on specified object attributes. This setup is perfect for scenarios where cookie consent information (such as titles, descriptions, and link details) is managed directly within the Scrivito, allowing content administrators to update information without requiring code changes.

If the cookie consent information does not need to be managed dynamically, consider using the UnconnectedCookieConsentBanner component instead. This alternative does not depend on Scrivito's getObj function, making it simpler and more straightforward for static content scenarios.

Properties:

• getObj: Function to retrieve the Scrivito object - usually the root obj.
• attributes: An object containing attribute keys for the object. These keys include:
  • title: (Optional) Attribute key for the title text.
  • description: (Optional) Attribute key for the description text.
  • link: (Optional) Attribute key for the "Learn more" link object.
  • declineConsentButtonTitle: (Optional) Attribute key for the decline button text.
  • acceptConsentButtonTitle: (Optional) Attribute key for the accept button text.
• ref: Optional. React ref to attach to the component.
• title: (Optional) The title of the banner, which can be a string or a React component.
• description: (Optional) The description text explaining the storage usage, which can be a string or a React component.
• consentLinkUrl: (Optional) URL for the "Learn more" link where users can get more detailed information about tracking.
• consentLinkTitle: (Optional) The text to display for the "Learn more" link.
• declineConsentButtonTitle: (Optional) The title for the decline button.
• acceptConsentButtonTitle: (Optional) The title for the accept button.
• onAccept: (Optional) Callback function that is called when the user accepts the tracking.
• onDecline: (Optional) Callback function that is called when the user declines the tracking.

Example Usage:

import { CookieConsentBanner } from "scrivito-neoletter-tracking";

<CookieConsentBanner
  getObj={() => Scrivito.root()}
  attributes={{
    title: "cookieTitle",
    description: "cookieDescription",
    link: "cookiePolicyLink",
    declineConsentButtonTitle: "cookieDeclineButtonTitle",
    acceptConsentButtonTitle: "cookieAcceptButtonTitle"
  }}
  onAccept={() => console.log("Cookies accepted")}
  onDecline={() => console.log("Cookies declined")}
/>

UnconnectedCookieConsentBanner Component

Description:
UnconnectedCookieConsentBanner

Props:

• title: (Optional) The title of the banner, which can be a string or a React component.
• description: (Optional) The description text explaining the storage usage, which can be a string or a React component.
• consentLinkUrl: (Optional) URL for the "Learn more" link where users can get more detailed information about tracking.
• consentLinkTitle: (Optional) The text to display for the "Learn more" link.
• declineConsentButtonTitle: (Optional) The title for the decline button.
• acceptConsentButtonTitle: (Optional) The title for the accept button.
• onAccept: (Optional) Callback function that is called when the user accepts the tracking.
• onDecline: (Optional) Callback function that is called when the user declines the tracking.

Example Usage:

import { UnconnectedCookieConsentBanner } from "scrivito-neoletter-tracking";

<UnconnectedCookieConsentBanner
  title="Your Privacy"
  description="Our website stores information to enhance your experience. Please accept or decline the use of this information."
  consentLinkUrl="https://www.example.com/cookies-policy"
  consentLinkTitle="Learn more about tracking"
  declineConsentButtonTitle="Decline"
  acceptConsentButtonTitle="Accept"
  onAccept={() => console.log("Accepted")}
  onDecline={() => console.log("Declined")}
/>

Neoletter Tracking Widget

Description:
The TrackingWidget allows editor to integrate tracking tags into their applications. These tags are used to monitor visitor activities on the website. The widget is only visible in the editing environment, ensuring that it does not affect the normal visitor's experience on the production site.

Widget Attributes:

• tags: A list of strings. Each string is a tag used for tracking purposes.

Usage: Simply add it into your page content in the Scrivito editing interface. You can then add tracking tags in the widget's configuration. These tags will be sent to Neoletter tracking service. To trigger tracking visitor has to spent at least one second on the page where the widgets has been provided.

Neoletter Campaign Widget

Description:
The CampaignWidget facilitates the management of campaign-specific content based on visitor tracking data. It allows editor to specify default content and conditional content that reactively changes based on the tracking data obtained during the visitor's sessions.

Widget Attributes:

• defaultTag: A string that represents the default tracking tag used to determine the initial content displayed to visitors.
• conditionalContent: A widget list specifically for CampaignConditionalContentWidget which adjusts content based on the real-time data and conditions defined.

Neoletter Campaign Conditional Content Widget

Description:
The CampaignConditionalContentWidget displays content conditionally based on tracking tags associated with user activity.

Widget Attributes:

• tag: A string that represents a tracking tag associated with specific content.
• content: A widgetlist that holds the content to be displayed if the conditions associated with the tag are met.

Usage: Add it inside a CampaignWidget. Configure the tag attribute to match the tracking tags that identify different visitor tracking criteria. Content placed in the content attribute will only be displayed if the conditions specified by the tag are met, providing a dynamic and personalized user experience.