Getting Started
How to Install Flowpoint Tracking Code

How to Install Flowpoint Tracking Code

Installing the Flowpoint Tracking code is a crucial initial step before getting any results with Flowpoint. Installing the tracking code allows Flowpoint to start capturing user events from your website and feed the machine learning algorithms and generate your analysis.

Installing the tracking code can be done in several ways depending on how your website has been built and what technology has been used.

👾

We are one click away if you need any help with the installation process.

We've identified the following popular methods of integrating Flowpoint:

Install directly via the Google Tag Manager (recommended)

  1. Go to your overview page (opens in a new tab) and click on "Install via Google Tag Manager."

Flowpoint and Google Tag Manager integration

  1. Choose your Google account connected to the GTM container on your site.

Flowpoint and Google Tag Manager integration

  1. Select all the access permissions for Flowpoint and click Continue.

  2. Pick your GTM account and tag container, then click "Create and Publish Tag."

Flowpoint and Google Tag Manager integration

  1. Wait a few minutes for Google to respond, then click Verify Installation.

Flowpoint and Google Tag Manager integration

Install via Google Tag Manger

  1. Go to “Tags” tab and click on “New”

A screenshot of NexBook page. raw

  1. Click on the Edit pencil button on the “Tag Configuration” section

A screenshot of NexBook page. raw

  1. Select “Custom HTML”

A screenshot of NexBook page. raw

  1. Copy paste the Flowpoint script in the HTML section

A screenshot of NexBook page. raw

  1. From the “Trigger” section, click on the edit button and chose a trigger. Select “Initialization - All pages”, then click on Add

A screenshot of NexBook page. raw

  1. Click on 'Save'

A screenshot of NexBook page. raw

Once you are ready with the installation from this step, make sure you follow the next steps 2.3, 2.4 and 2.5

👾

We are one click away if you need any help with the installation process. Don't hesistate to reach out.

Install in a custom website

React

  1. Go to your top level public folder
  2. Open the index.html file and paste your scrip.

A screenshot of NexBook page. raw

For more details regarding how to add a JS script into a react application please visit this link: https://www.codingdeft.com/posts/react-add-script/ (opens in a new tab).

Next js

  1. Go to your project folder into pages/api/index.js

  2. Paste the Flowpoint script within the <Head> tags

A screenshot of NexBook page. raw

!> Or follow the best practice guide and:

import Script from 'next/script'

  1. Import the Script component from next/script. This will allow a more efficient way of loading javascript tags into your next js application.
  2. Load the Flowpoint script using the Script component as follows: <Script src="https://sdk.flowpoint.ai?apiKey=<API_KEY>&clientId=<CLIENT_ID>" />

A screenshot of NexBook page. raw

Vue

  1. Go to your top level project folder

  2. Go to public/index.html and paste the Flowpoint script into the <head> tag as in the image below:

A screenshot of NexBook page. raw

For more information regarding how to integrate a JS script into a Vue JS application please visit the link below: https://www.programmingbasic.com/add-external-script-tags-in-vue-js-component (opens in a new tab).

Angular

  1. Go to your top level project folder

  2. Go to src/index.html file and paste the Flowpoint script into the <head> tag as in the image below:

A screenshot of NexBook page. raw

For more details regarding how to integrate a JS script into an Angular application please visit the link below: https://www.htmlgoodies.com/javascript/loading-external-scripts-dynamically-in-angular/ (opens in a new tab).

Install using a website builder

Wordpress

  1. Go to your wordpress admin wp-admin dashboard by going to your websiteurl/wp-admin and log in with your wordpress credentials

  2. On the left side bar go to Plugins and click on Add New

  3. Search for the Insert Headers and Footers plugin, install it and activate it.

  4. The plugin will appear on the left hand side in the side bar. Click on it and then go to Header and Footer

A screenshot of NexBook page. raw

  1. In the header section paste the flowpoint script and then click on “Save changes”

A screenshot of NexBook page. raw

Shopify

  1. Go to your Shopify account

  2. Under Sales channels click on Online store

  3. Go to Themes

  4. In your current team window click on the “Actions” dropdown and select edit code

  5. In the Layout folder, open the file theme.liquid

  6. Find the starting of the head tag which is marked as <head> and the closing of the head tag which is marked as </head>

  7. Right above the closing of the head tag paste in the Flowpoint script as follows:
    Here are customizable files/folders of the project:

A screenshot of NexBook page. raw

Wix

  1. Go to your wix account

  2. Go to settings and click on Custom code

  3. Add the Flowpoint script in the header section

Registration & OnboardingActivating Your Flowpoint Account