# Integrations

# Native

Novti comes equipped with native integrations that are seamlessly integrated out of the box. Native integrations are pre-built connections designed to work seamlessly with just a few configuration settings within Novti. They leverage the strengths and capabilities of the underlying technology to provide a smooth and efficient user experience.

# Google Tag Manager

Google Tag Manager (GTM) is a tool that lets you manage and organize different tracking and measurement tags on your website without directly editing the website's code. It simplifies the process, giving you control over the data you collect and the tools you use, all through a user-friendly interface. Once the settings are configured within Novti the GTM is implemented automatically on your environment. It is also possible to extend the features of the GTM with tracking via events. Often this is configured to track payments. Tracking payments can be done via a script that you can add in the Novti Page Builder.

# How to get reCAPTCHA v3 keys

Generate your own Google reCAPTCHA v3 keys (opens new window). Please keep in mind that you'll have to whitelist the domain where you want to enable the Google reCAPTCHA v3. If you haven't configured your own custom domain you can define the base domain from Novti. e.g. acme.pages.novti.io where you'll update acme to your own tenant.

WARNING

Once you'll migrate to your own domain don't forget to whitelist your new domain within Google!

# Setup your own event within Novti (ADVANCED)

Below you'll find a code snippet with detailed information.

View code snippet

if (NOVTI_ORIGIN_TRANSACTION) {
  const frequencyMultiplier = (frequency) => {
    let multiplier

    // ADJUST THE MULTIPLIER BY FREQUENCY HERE
    if (frequency === 'once') {
      multiplier = 1
    } else if (frequency === 'monthly') {
      multiplier = 12
    } else if (frequency === 'yearly') {
      multiplier = 1
    } else if (frequency === 'quarterly') {
      multiplier = 4
    }

    return multiplier
  }

  const frequencyToValue = (frequency) => {
    let fqstring

    // ADJUST THE FREQUENCY STRINGS HERE
    if (frequency === 'once') {
      fqstring = 'Once'
    } else if (frequency === 'monthly') {
      fqstring = 'Monthly'
    } else if (frequency === 'yearly') {
      fqstring = 'Yearly'
    } else if (frequency === 'quarterly') {
      fqstring = 'Quarterly'
    }

    return fqstring
  }

  const computedDataLayer = {
    'event': 'purchase',
    'transaction_id': NOVTI_ORIGIN_TRANSACTION._ID,
    'affiliation': '',
    'payment_type': NOVTI_ORIGIN_TRANSACTION.paymentmethods.paymentmethod,
    'value': (
      currency(NOVTI_ORIGIN_TRANSACTION.frequencyamounts.amount, {
        fromCents: true
      }) * frequencyMultiplier(NOVTI_ORIGIN_TRANSACTION.frequencyamounts.frequency)
    ),
    'currency': 'EUR',
    'items': [{
      'item_name': NOVTI_ORIGIN_TRANSACTION.pageMetadata.slug,
      'item_variant': frequencyToValue(NOVTI_ORIGIN_TRANSACTION.frequencyamounts.frequency),
      'affliliation': '',
      'currency': 'EUR',
      'index': 1,
      'item_brand': '',
      'item_category': 'purchase',
      'price': (
        currency(NOVTI_ORIGIN_TRANSACTION.frequencyamounts.amount, {
          fromCents: true
        }) * frequencyMultiplier(NOVTI_ORIGIN_TRANSACTION.frequencyamounts.frequency)
      ),
      'quantity': 1
    }]
  }

  dataLayer.push(computedDataLayer)
}

The code above can be added within the Novti Page Builder via the Edit Source button.

<body>
    <!-- All your HTML elements here -->

    <!-- Just above the ending of the `</body>` -->
    <script type="text/javascript">
        if (NOVTI_ORIGIN_TRANSACTION) {
          // Code snippet with the logic here...
        }
    </script>
</body>

The NOVTI_ORIGIN_TRANSACTION is a system defined variable which will contain all previous submitted data.

// Figure out what key & values are available within the transaction. 

// NOTE: 
// The variable is only available on thankyou pages
// since its getting data from a previous transaction
console.log(NOVTI_ORIGIN_TRANSACTION)

// If the key `firstName` is available you can get the firstName like this.
console.log(NOVTI_ORIGIN_TRANSACTION.firstName)

Loading the image...

WARNING

Avoid sending Personally Identifiable Information (PII) to Google. Read the article (opens new window).

# Postcode NL

Postcode.nl is a service that helps you find accurate postal codes and addresses in the Netherlands. It's like a digital address book that provides you with the right postal code and details for a specific location. This integration within Novti will be used once you'll enter both your houseNumber in combination with your zipcode that automatically the street & city will be passed to the form. This makes sure the end-user only has to submit two fields to be able to collect a valid address.

# reCAPTCHA

reCAPTCHA v3 is a tool used on websites to protect against spam, bots, and other malicious activities without bothering users with annoying tests. It works behind the scenes to identify and separate human visitors from automated or suspicious ones.

On your Novti domain you want to ensure that real people are interacting with it, not automated bots that could cause harm or disrupt the experience. With reCAPTCHA v3, you can achieve this without inconveniencing your users with traditional tests like solving puzzles or clicking on images. The validation will quietly take place in the background.

reCAPTCHA v3 uses advanced algorithms and machine learning to analyze user behavior on your website. It silently monitors things like mouse movements, scrolling, and clicking patterns to determine if the activity is typical of a human or suspicious in nature.

Based on this analysis, reCAPTCHA v3 assigns a score to each user, indicating the likelihood of them being a human or a bot. A high score suggests a genuine human interaction, while a low score raises suspicions of automated behavior.

Within Novti you can set a threshold score to determine how strict or lenient you want to be in allowing access or taking action. For example, you might choose to block requests with a low score that indicate a high probability of being a bot, while letting through those with higher scores that indicate human activity. The higher the score (0.1 - 1.0) the bigger the change to eliminate any bots.

More information regarding Google reCAPTCHA v3 (opens new window)

# Custom

For users seeking a more personalized approach, Novti also supports custom integrations. With custom integrations, users have the flexibility to define and configure their own connections based on specific requirements. If your preferred service isn't part of the Native integration then this is your way to connect the services together.

Loading the image...

← Domain mapping Security →