Get started with Dreamdata
How to invite your colleagues to Dreamdata
How to set up Dreamdata Web tracking (analytics.js) manually
How to set up up Dreamdata web tracking (analytics.js) using Google Tag Manager
How to track forms adding the auto-identify script via Google Tag Manager.
Onboarding for paying customers [VIDEO]
Onboarding process for free customers [VIDEO]
Setting Up Dreamdata
Single sign-on
The Onboarding Process
What is Dreamdata? [VIDEO]
Dashboards
Home
Engagement
Content Reporting
Analytics
Performance
Content Performance - Dashboard Options
Which channel performs best for different content?
Which content generates pipeline?
Measuring influenced pipeline for B2B content - the true conversion metric
Setup Content Reporting
What KPI to measure the effect of B2B content?
Performance
Paid
Ad Spend
Bing Ads
Capterra Ads
Facebook Ads
G2 Crowd
Google Display Ads
Google Search Ads
LinkedIn Ads
Overview
Return on Ads Spend
YouTube Ads
Organic
Acquisition
Conversions
Performance vs. Revenue attribution: A guide on when to use what
Web Traffic
Journeys
Revenue Analytics
Data Platform
Sources
Albacross
Clearbit Reveal
Custom Integration
Import cost data using Google Sheet
Importing historical data to Dreamdata using Google Sheets
RollWorks Site Traffic Revealer
Setting up AdRoll
Setting up Bing Ads
Setting up Capterra
Setting up Close
Setting up Data Export to BigQuery of CRM Properties
Setting up Facebook Ads
Setting up G2 Crowd
Setting up Google Ads
Setting up Google Search
Setting up HubSpot
Setting up Intercom
Setting up LinkedIn Ads
Setting up Marketo
Setting up Microsoft Dynamics
Setting up Pardot
Setting up Pipedrive
Setting up Salesforce
Setting up Twitter Ads
Setting up Zapier integration & Zaps for Lead Gen forms/Lead Ads
Setting up Zendesk Sell
Setting up Zoho CRM
Triblio ABM platform
Destinations
Connect to AWS Redshift using AWS Glue
Connect your Dreamdata data to Amazon Redshift
Connect your Dreamdata data to Snowflake
Getting Started with Google Data Studio Templates
Google BigQuery
Google Cloud Storage
Google Connected Sheets
Guides for Google Data Studio Reporting
LinkedIn Offline Conversion
Data Enrichment
Intent data
Overview
Table Schema
General Settings
Tracking
Segment
Advanced Identification of users and companies
Anonymizing IP
Calendly
Cookie Bar
Cookie Retention
Dreamdata Cookies
Form Tracking
How does Dreamdata track all relevant on-site customer data?
How to track your emails?
Pardot iframe form tracking
Query parameters
Reduce impact from ad-blockers and Apple ITP 2.x
Server Side Analytics APIs
Tracking Hubspot Forms with auto-identify script
Tracking SPAs (Single Page Applications)
Tracking iframes with auto-identify script
Tracking using Sleeknote or Drift
Allowed Domains
Menu: Settings
Setting up your customised Stage Models
Setting up your default Stage Models
UTM Mapping
FAQ
Can I exclude content or websites from being tracked?
Categories
Roles and Permissions
Some of my deals are flagged with "no-tracking". What does it mean?
What does Visitors, Contacts and Companies mean?
What is a Stage Model?
What is a company in Dreamdata?
What is a session?
Why are my dashboards empty?
Agency Partners
Contact
Ideal Customer Profile
Intro Template for your new clients
Partner Material
Partner Tiers
Referral Guide and UTM tracking
Welcome Partner!
Quick learning videos!
Are you using G2?
Do you know how your company is generating money?
Do you know which of your Marketing activities had the biggest impact on pipeline and revenue?
Dreamdata Content Analytics: Discover the real value of your content
Find the content that generates most pipeline
Helping BDRs break through to the hottest accounts
How Content Analytics tracks the influence of content of pipeline and revenue
How to cut the cost of your Google Search Ads
How to easily build a retargeting audience with Dreamdata
How to see the value of B2B Google Ads in pipeline and revenue generated
How to set up content categories on Dreamdata
Performance vs. Revenue Analytics reports- when to apply them best!
See the value of SEO in pipeline and revenue generated
What attribution really is and why you should care!
Which of your emails produce pipeline and revenue?
- All Categories
- General Settings
- Tracking
- Tracking SPAs (Single Page Applications)
Tracking SPAs (Single Page Applications)
Updated
by ag@dreamdata.io
Tracking events with Dreamdata in a Single Page Application (SPA) depends on the specific SPA framework being used. This article cannot cover every possible framework, but it will provide examples from popular libraries/frameworks, such as React and Angular.
Since there isn't a modern SDK available for seamless installation and import (using any JavaScript module systems), you'll need to manually incorporate our Analytics script into your main index.html file or a template. The location for injecting the script may vary depending on the specific library or framework used. However, most modern UI tools generally have a primary index.html page where the app is rendered, making it a suitable place for script insertion.
ℹ️ It's important to note that, unlike most other methods for configuring Dreamdata analytics and form tracking, this approach necessitates the involvement of a developer with access to the codebase. It cannot be implemented through Google Tag Manager (GTM) or our Auto Identify script.
Setting up the Analytics script:
- In your Dreamdata application, navigate to Data Platform > Sources > Javascript (Web Tracking) Source.
- Click on the "Copy Script" button.
- Paste the copied script into your main app's HTML page, e.g., the index.html file in the root directory for a React CRA. Place the script right before the closing
</head>
tag.
At this point, window.analytics
should be globally accessible in your app. You now have access to various tracking methods, such as analytics.track
, analytics.identify
, and analytics.page
, which we will discuss further in the following sections.
Tracking view (route) changes
React.js
In SPAs, different views are rendered instead of loading new HTML pages for each URL change. This process is typically managed by a third-party library, like react-router-dom
or similar.
Here's an example of tracking view changes in modern React Application:
// React example that uses useLocation hook from react-router-dom
const location = useLocation();
useEffect(() => {
analytics.page();
}, [location.pathname]);
This effect has the location as a dependency, and it calls analytics.page()
whenever the URL pathname changes.
Angular.js
The Angular example is similar to the previous React.js example:
// Implement the OnInit interface for your AppComponent:
@Component({ // ... })
export class AppComponent implements OnInit { // ... }
// Subscribe to the router's events and filter for NavigationEnd events, then call analytics.page() with the current route:
constructor(private router: Router) {}
ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
analytics.page();
}
});
}
As mentioned at the beginning of this guide, we cannot cover implementations for every modern UI framework or library. However, the concept should be clear enough, regardless of the framework you use. Simply "hook" into the appropriate router for that specific tool and listen for route changes.
Tracking forms
Although there is a brief section on tracking forms with our Analytics script, it's helpful to provide a straightforward example to guarantee a mutual understanding.
In a contemporary application, it's common to encounter a form accompanied by an onSubmit
handler.
export default function FormExample() {
const [email, setEmail] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
// this will be based on whatever your form does // e.g. book-a-demo
analytics.track("some-form-submit");
// How you get an email from your form can vary
// and can be done in tens of different ways
// regardless, you'll somehow get a value of an email from a form
// and pass it to our identify
analytics.identify(null, { email });
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<input name="email" placeholder="email" type="email" onChange={(e) => setEmail(e.target.value)} />
<button type="submit">Submit</button>
</form>
</div> );
}
This is just a React.js example and illustrates how you would do this in a modern UI library. No matter what you use, you will have a handler for your form. In this scenario, whatever you form does, you will include analytics.track
and analytics.identify
as part of it.
This concludes our guide on using Dreamdata tracking with Single Page Applications (SPAs). If you have further questions or need clarification on any aspect of this guide, please feel free to contact us.