Add Script To Your Website

Once a website is added and listed on the Website Settings page in Fluentos, the next step is to connect your website with Fluentos so that the campaigns created for this website can be published to the site and made visible and accessible to end-users. This can be achieved by installing the Fluentos script on your website.

Installation options

• Adding a tag in Google Tag Manager: Create new tags in your Google Tag Manager according to the instructions given on the page.
• Adding a script to the website: Copy and paste the provided scripts into your website’s header or footer.

Consent setup (important)

Fluentos uses cookies that require user consent under GDPR/ePrivacy regulations. For a complete list of cookies used by Fluentos and their purposes, see our Fluentos cookies (GDPR & ePrivacy guide).

Fluentos should be installed under the correct consent categories:

• Marketing consent: Load the Fluentos marketing script after the end-user accepts Marketing consent. This is required for campaigns to display, track triggers (page views, sessions), and show personalized content.

• Analytics/Statistics consent: Enable analytics after the end-user accepts Analytics/Statistics consent. This allows Fluentos to accurately count impressions, track session attribution, and report user types.

  What happens without Analytics/Statistics consent?

  • Analytics will be duplicated (the safeguard preventing analytics over-reporting won’t function)
  • Session medium will show as No Consent
  • User Type will show as No Consent
  • Device Distribution will show as No Consent

Update your cookie banner

Don’t forget to update your website’s cookie banner with information about Fluentos cookies. See the Fluentos cookies (GDPR & ePrivacy guide) page for the complete list of cookies, their purposes, and durations.

Analytics/Statistics consent flag

When the end-user accepts Analytics/Statistics consent, set this flag:

<!-- Fluentos Analytics -->
<script nonce="9hmDFLK2hKG2OzPwMMSZlw==">
  window.fluentosAnalyticsConsent = true
</script>
<!-- End Fluentos Analytics -->

Single Page Applications (SPA)

For Single Page Applications (SPA), the analytics consent script needs to run on every virtual page load/route change, not just on the initial page load.

Since SPAs handle navigation without full page reloads, you need to dynamically set the consent flag based on the user’s current consent status:

<!-- Fluentos Analytics -->
<script nonce="9hmDFLK2hKG2OzPwMMSZlw==">
  window.fluentosAnalyticsConsent = `DYNAMIC_VALUE`
</script>
<!-- End Fluentos Analytics -->

Replace DYNAMIC_VALUE with:

• true when the user has accepted Analytics/Statistics consent
• false when the user has not accepted or has revoked Analytics/Statistics consent

Why this is important for SPAs

In SPAs, the initial script execution happens only once on app load. However, Fluentos needs to know the current consent status on every virtual page change to ensure accurate analytics tracking and compliance with user preferences.

Recommended setup in Google Tag Manager (GTM)

Step 1: Add the Marketing Script

1. In Fluentos, open the installation modal and copy the Fluentos Marketing script.
2. In GTM, create a Custom HTML tag (example name: Fluentos (Marketing)).
3. Paste the Fluentos Marketing script into the tag.
4. Set the trigger to fire only when Marketing consent is accepted.

Step 2: Add the Analytics Script

1. Create a second Custom HTML tag (example name: Fluentos (Analytics)).

2. Paste the following Fluentos Analytics script into the tag:

   <!-- Fluentos Analytics -->
   <script nonce="9hmDFLK2hKG2OzPwMMSZlw==">
     window.fluentosAnalyticsConsent = true
   </script>
   <!-- End Fluentos Analytics -->

3. Set the trigger to fire only when Analytics/Statistics consent is accepted.

Whitelist Fluentos in Your Content Security Policy (CSP)

When using Fluentos on your website alongside a Content Security Policy (CSP), it’s crucial to ensure your CSP allows Fluentos to operate correctly.

CSP is a security feature that controls which resources (like scripts, styles, and images) can load on your site. By default, CSP blocks resources that are not explicitly permitted. If Fluentos is not included in your CSP policy, it might fail to load.

• Allows the Fluentos client-side scripts to load and run on your site. The nonce-... part ensures that only inline scripts marked with this specific nonce can execute, helping maintain security while enabling the Fluentos Datahub functionality.

  script-src 'nonce-9hmDFLK2hKG2OzPwMMSZlw==' https://*.fluentos.com https://*.youtube.com

  Video

  https://*.youtube.com is optional. Add it if you are planning to use the Video Widget.

• Enables your site to communicate with the Fluentos domain, whether fetching data, sending analytics, or making other network requests. Without this, Fluentos wouldn’t be able to receive or send the data required for its features.

  connect-src https://*.fluentos.com

• Permits inline styling needed by Fluentos to render its campaigns.

  style-src 'unsafe-inline'

• Allows images from the Fluentos domain to load on your site. This ensures that any campaign images or other resources hosted by Fluentos appear correctly for your users.

  img-src https://*.fluentos.com