Freshpaint
HomeLogin
  • Documentation
    • What is Freshpaint?
    • ⚕️HIPAA Mode
    • 🏗️Building Out Your Account
    • 🌐Overview of Features
    • Guides
      • 📡Add Autotrack to your website to collect data from your users
        • Installing the Freshpaint Javascript SDK
        • Installing the Freshpaint SDK with a Content Security Policy (CSP)
        • Installing the Freshpaint Javascript SDK with Server-Side Rendering (SSR) + React
        • Autocapture + React
        • Configuring a Destination
        • Labeling User Actions
        • How do I install Freshpaint with Typescript?
      • 🔁Send historical data to any destination with Time Machine
      • Next.js Quickstart Guide
      • Android Quickstart Guide
        • Installing the Freshpaint Android SDK
        • Configuring a Destination
        • Instrumenting Your App
      • iOS Quickstart Guide
        • Installing the Freshpaint iOS SDK
        • Configuring a Destination
        • Instrumenting Your App
      • React Native Quickstart Guide
        • Installing the Freshpaint React Native SDK
        • Configuring a Destination
        • Labeling User Actions
        • Configuring Property Capture
    • Setting up Properties
    • Setting up Your Destinations
      • Enabling and Disabling a Destination
      • Deleting a Destination
    • Setting up Your Events
    • User Identification
      • Designated Identify Properties
    • Maps
    • Analytics (Beta)
      • Web Analytics Dashboard
      • Campaigns
      • Service Lines
      • Data Glossary
    • Translations
    • Web Tracker Monitoring
      • Tracker Resolution Types
      • Historical Scans
  • Integrations
    • Destinations
      • Demand Side Platforms (DSPs)
        • Basis
          • Basis Quick Start Guide
          • Basis Reference
        • Google Campaign Manager 360
        • StackAdapt
          • StackAdapt Quick Start Guide
          • StackAdapt Reference
        • theTradeDesk
          • theTradeDesk Quick Start Guide
          • theTradeDesk Reference
          • theTradeDesk with CM360 Configuration Guide
        • Viant
          • Viant Quick Start Guide
          • Viant Reference
      • Direct Response Ads
        • Facebook Conversions API
          • Facebook Conversions API Quick Start Guide
          • Facebook Conversions API Reference
        • Google Ads Conversion API
          • Google Ads Conversion API Quick Start Guide
          • Google Ads Conversions API Reference
        • Google Ads
          • Google Ads Quick Start Guide
          • Google Ads Reference
        • LinkedIn Ads
          • LinkedIn Ads Quick Start Guide
          • LinkedIn Ads Reference
        • Microsoft Ads (formerly Bing Ads)
          • Microsoft Ads Quick Start Guide
          • Microsoft Ads Reference
          • Microsoft Ads Multi-Config Reference
        • Pinterest Ads (Beta)
          • Pinterest Ads Quick Start Guide
          • Pinterest Ads Reference
        • Pinterest Tag
        • Reddit Ads
          • Reddit Ads Quick Start Guide
          • Reddit Ads Reference
        • TikTok Ads
        • Twitter Ads
      • Data Activation
        • ActiveCampaign
          • ActiveCampaign Quick Start Guide
          • ActiveCampaign Reference
        • Amplitude
          • Amplitude Quick Start Guide
          • Amplitude Reference
        • Braze (formerly Appboy)
          • Braze Quick Start Guide
          • Braze Reference
        • Customer.io
          • Customer.io Quick Start Guide
          • Customer.io Reference
        • Freshsales
        • Google Analytics 4 Proxy
          • Google Analytics 4 Proxy Quick Start Guide
          • Google Analytics 4 Proxy Reference
          • Google Analytics 4 Proxy Advanced Tracking Configurations
        • Google Analytics 4 Server-Side
          • Google Analytics 4 Server-Side Quick Start Guide
          • Google Analytics 4 Server-Side Reference
        • Heap
        • Hotjar
        • HubSpot Cloud
        • HubSpot Web
        • impact.com
          • Impact.com Quick Start Guide
          • Impact.com Reference
        • Intercom
          • Intercom Quick Start Guide
          • Intercom Reference
        • Iterable
          • Iterable Quick Start Guide
          • Iterable Reference
        • June
        • Klaviyo
        • Mixpanel
          • Mixpanel Quick Start Guide
          • Mixpanel Reference
        • OneSignal
          • OneSignal Quick Start Guide
          • OneSignal Reference
        • Podscribe (Early Access)
        • Sendinblue
        • Sentry
        • Vero Cloud
        • Webengage
        • Webhooks
        • Woopra
        • Zendesk
      • Data Warehouses
        • Azure Warehouse Setup
        • BigQuery Warehouse Setup
        • Databricks Warehouse Setup
        • Postgres Warehouse Setup
        • Redshift Warehouse Setup
        • S3 Warehouse Setup
        • Snowflake Warehouse Setup
      • Consent Management
        • Osano
        • OneTrust
        • Custom Consent Manager
    • Sources
      • Web
        • Autotrack
        • Precision Tracking
      • CallRail
      • Invoca
      • Customer.io
      • Intercom
      • Mailchimp
      • React Native
      • SendGrid
      • Sendinblue
      • Server-Side
      • iOS
    • 🔷Google Tag Manager integration
      • Google Tag Manager migration
      • Quick Start Guide
    • 📺Freshpaint Video Platform
    • 🖼️Impression Pixel
  • Admin Panel
    • Event Library
      • Event Library Bulk Actions
      • Event Definition Filters
      • Event Tester
      • 🔁Time Machine
      • Visual Tagger
      • Advanced Options
        • Tag Manager
        • Disabling Target Text Capture
        • Cross Domain Tracking
    • Projects & Environments
    • Teams
      • Role-Based Access Control (RBAC)
    • Transformations
      • Standard Events
      • Modify Data
      • Modify User Data
      • SQL Transformations
    • 📈Destination Monitoring
    • 🔎Investigate: Testing and Debugging
      • Live View
      • Event Verification
  • Reference
    • Developer Docs
      • Freshpaint Web SDK Reference
      • Freshpaint Web SDK Options
      • Freshpaint React Native SDK Reference
      • Freshpaint iOS SDK Reference
      • Freshpaint Android SDK Reference
      • HTTP API
    • Frequently Asked Questions
      • How do I circumvent ad blockers?
      • Can Freshpaint track users across domains?
      • Can I install Freshpaint on a Chrome extension?
      • What properties are captured with my events?
      • How Do I Switchover From Segment?
      • How Do I Switch From Native Google Analytics to the Freshpaint Google Analytics Destination?
      • Where do I find my Environment ID?
      • Is Freshpaint GDPR & CCPA Compliant?
      • Can I use transformations to anonymize data for client-side destinations?
      • How do I QA or debug my data?
      • Why Do My Numbers Differ Across Different Tools?
      • Billing: How Does Freshpaint Determine MTUs?
      • Can I Use Freshpaint on Multiple Sites?
      • How Can I Export Data From Freshpaint?
      • How Does Freshpaint Identify Users?
      • How Many Events Should I Create?
      • What Should I Name My Events?
      • How do I track scroll depth?
      • What Data Does Freshpaint Collect?
        • Data Collected on Web
        • Data Collected on React Native
      • Does Freshpaint's Autotrack slow my site down?
      • Running Freshpaint with a Proxy
      • Should my Environment ID be treated as a sensitive key?
      • How Does Freshpaint Determine Session Count?
      • What is the difference between client-side and server-side connection mode?
      • What is a Proxy Integration?
      • Where can I view Freshpaint’s Status?
      • Does Freshpaint provide HIPAA audit logs?
      • Freshpaint Cookie Too Large
      • How does Freshpaint compare to server-side Google Tag Manager?
      • If a user re-installs my app, will Freshpaint generate a new device ID?
      • Why doesn't Freshpaint need a BAA before sending data to Google Ads and Facebook Ads?
      • What Implementation Services Does Freshpaint Offer?
      • Single Sign On (SSO) Setup
Powered by GitBook
On this page
  • Finding your Freshpaint Web snippet
  • The first Script component
  • The second Script component
  • Rendering the FreshpaintSnippet component in your Next.js application

Was this helpful?

  1. Documentation
  2. Guides

Next.js Quickstart Guide

Installing the Freshpaint Javascript SDK in a Next.js application

PreviousSend historical data to any destination with Time MachineNextAndroid Quickstart Guide

Last updated 2 months ago

Was this helpful?

is a popular front-end framework for building React-based applications optimized for server-side rendering (SSR) and static website generation. While we usually recommend using React's , Next.js requires its own special approach to integrating Freshpaint with your application. Next.js provides a built in component called that is used to add additional JavaScript to the page.

Below is an example of a Next.js component you might create to add the Freshpaint SDK to the page and initialize it for your site's Freshpaint environment.

import React from 'react'
import Script from 'next/script';

export default function FreshpaintSnippet() {
  return (
    <>
      <Script
        id="freshpaint-snippet"
        dangerouslySetInnerHTML={{
          __html: `
            (function(){function p(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,a=new Array(e);t<e;t++)a[t]=r[t];return a}function v(r){if(Array.isArray(r))return p(r)}function h(r){if(typeof Symbol!="undefined"&&r[Symbol.iterator]!=null||r["@@iterator"]!=null)return Array.from(r)}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(r,e){if(r){if(typeof r=="string")return p(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(t);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(r,e)}}function y(r){return v(r)||h(r)||I(r)||A()}var E=function(r,e){if(!e.__SV){try{var t,a,m=window.location,c=m.hash,x=function(n,o){return t=n.match(new RegExp(o+"=([^&]*)")),t?t[1]:null};c&&x(c,"fpState")&&(a=JSON.parse(decodeURIComponent(x(c,"fpState"))),a.action==="fpeditor"&&(window.sessionStorage.setItem("_fpcehash",c),history.replaceState(a.desiredHash||"",r.title,m.pathname+m.search)))}catch(S){}e.__loaded=!1,e.config=!1,e.__SV=2,window.freshpaint=new Proxy(e,{get:function(n,o){return n[o]!==void 0?n[o]:o==="init"?function(l,u,i){var _,d;(_=n)[d="_i"]||(_[d]=[]),n._i.push([l,u||{},i||"freshpaint"])}:function(){for(var l=arguments.length,u=new Array(l),i=0;i<l;i++)u[i]=arguments[i];var _=[o].concat(y(u));return n.push(_),new Proxy(_,{get:function(f,w){return f[w]?f[w]:function(){for(var b=arguments.length,g=new Array(b),s=0;s<b;s++)g[s]=arguments[s];f.length=0,f.push([o].concat(y(u))),f.push([w].concat(y(g)))}}})}}})}};E(document,window.freshpaint||[]);})();
            freshpaint.init("YOUR FRESHPAINT ENVIRONMENT ID HERE");
            freshpaint.page();
          `
        }}
      />
      <Script src="https://freshpaint-cdn.com/js/YOUR FRESHPAINT ENVIRONMENT ID HERE/freshpaint.js" />
    </>
  )
}

Finding your Freshpaint Web snippet

Let's take a look at each Script component in more detail.

The first Script component

      <Script
        id="freshpaint-snippet"
        dangerouslySetInnerHTML={{
          __html: `
            (function(){function p(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,a=new Array(e);t<e;t++)a[t]=r[t];return a}function v(r){if(Array.isArray(r))return p(r)}function h(r){if(typeof Symbol!="undefined"&&r[Symbol.iterator]!=null||r["@@iterator"]!=null)return Array.from(r)}function A(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(r,e){if(r){if(typeof r=="string")return p(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(t);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return p(r,e)}}function y(r){return v(r)||h(r)||I(r)||A()}var E=function(r,e){if(!e.__SV){try{var t,a,m=window.location,c=m.hash,x=function(n,o){return t=n.match(new RegExp(o+"=([^&]*)")),t?t[1]:null};c&&x(c,"fpState")&&(a=JSON.parse(decodeURIComponent(x(c,"fpState"))),a.action==="fpeditor"&&(window.sessionStorage.setItem("_fpcehash",c),history.replaceState(a.desiredHash||"",r.title,m.pathname+m.search)))}catch(S){}e.__loaded=!1,e.config=!1,e.__SV=2,window.freshpaint=new Proxy(e,{get:function(n,o){return n[o]!==void 0?n[o]:o==="init"?function(l,u,i){var _,d;(_=n)[d="_i"]||(_[d]=[]),n._i.push([l,u||{},i||"freshpaint"])}:function(){for(var l=arguments.length,u=new Array(l),i=0;i<l;i++)u[i]=arguments[i];var _=[o].concat(y(u));return n.push(_),new Proxy(_,{get:function(f,w){return f[w]?f[w]:function(){for(var b=arguments.length,g=new Array(b),s=0;s<b;s++)g[s]=arguments[s];f.length=0,f.push([o].concat(y(u))),f.push([w].concat(y(g)))}}})}}})}};E(document,window.freshpaint||[]);})();
            freshpaint.init("YOUR FRESHPAINT ENVIRONMENT ID HERE");
            freshpaint.page();
          `
        }}
      />

In the code above, there are a few important things to note:

  1. Next.js requires that a unique id attribute be defined on any Script component that does NOT use the src attribute to reference a remote JavaScript source file. This must be defined or Next.js will not be able to properly render the script HTML element onto the page.

  2. The value of the prop dangerouslySetInnerHTML.__html comes from the first script tag in your Freshpaint environment's Web integration snippet (described in the section above).

The second Script component

<Script src="https://freshpaint-cdn.com/js/YOUR FRESHPAINT ENVIRONMENT ID HERE/freshpaint.js" />

In the code above, the value of the src attribute comes from the second script tag in your Freshpaint environment's Web integration snippet (described in the section above).

Rendering the FreshpaintSnippet component in your Next.js application

The best location to render your new FreshpaintSnippet component in your Next.js application will depend upon what kind of Next.js application you are building, and the structure of your application. In general, we recommend rendering the FreshpaintSnippet component in one of the "root" components of your application. Your FreshpaintSnippet should only render onto the page one time, and should remain rendered on the page for the lifetime of your Next.js application.

The contents of each Script component's JavaScript source correspond to the two script tags found in the Freshpaint application under the Web integration of the Sources page at . You should see the modal containing your Freshpaint snippets below by clicking the Configure button next to the Web integration:

:

Next.js
useEffect
hook as a way to initialize the Freshpaint SDK
Script
https://app.freshpaint.io/sources