Get started with Dreamdata
What is Dreamdata? [VIDEO]
Setting Up 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.
The Onboarding Process
Onboarding process for free customers [VIDEO]
Onboarding for paying customers [VIDEO]
Single sign-on
How to invite your colleagues to Dreamdata
Dashboards
Home
Engagement
Performance
Content Performance
Analytics
Which channel performs best for different content?
Which content influenced the MQLs created in a time period?
Content Performance - Dashboard Options
Which content generates pipeline?
Measuring influenced pipeline for B2B content - the true conversion metric
What KPI to measure the effect of B2B content?
Setup Content Reporting
Content Analytics - Dashboard Options
Paid
Overview
Ad Spend
Return on Ads Spend
Google Search Ads
Google Display Ads
LinkedIn Ads
Bing Ads
Facebook Ads
YouTube Ads
Capterra Ads
G2 Crowd
Organic
Acquisition
Conversions
Web Traffic
Performance vs. Revenue attribution: A guide on when to use what
Journeys
Revenue Analytics
Data Platform
Sources
Intent Data
Paid
Setting up Facebook Ads
Setting up AdRoll
Setting up Twitter Ads
Setting up Bing Ads
Setting up LinkedIn Ads
Setting up Google Ads
Setting up G2
Setting up Capterra
CRM
Marketing Automation
Import Other
Import fixed cost data using Google Sheet
Importing data not in your CRM (using Google Sheets)
Import cost data using Google Sheet
Custom data
Setting up Outreach
Setting up Zapier integration & Zaps for Lead Ads
Setting up Google Search
Setting up Intercom
Destinations
Ad Network
Data Warehouse
Google BigQuery
Connect to AWS Redshift using AWS Glue
Connect your Dreamdata data to Snowflake
Connect your Dreamdata data to Amazon Redshift
Cloud Storage
Business Intelligence
Guides for Looker Studio Reporting
Getting Started with Looker Studio Templates
Google Connected Sheets
Setting up Data Export to BigQuery of CRM Properties
Overview
Company Data Enrichment
Table Schema
Intent data
General Settings
Tracking
Segment
Dreamdata Cookies
Form Tracking
Reduce impact from ad-blockers and Apple ITP 2.x
Pardot iframe form tracking
Anonymizing IP
Tracking using Sleeknote or Drift
How to track your emails?
Cookie Bar
How does Dreamdata track all relevant on-site customer data?
Cookie Retention
Tracking Hubspot Forms with auto-identify script
Server Side Analytics APIs
URL query parameters
Calendly
Tracking iframes with auto-identify script
Tracking SPAs (Single Page Applications)
Across domain & device tracking
Advanced Identification of users and companies
Stage Models
Setup Guide: All Salesforce Opportunities entering specific Stage
Setup Guide: Creation of Opportunities/Deals
Setup Guide: Tracked sign-up events
Setup Guide: All Hubspot Deals entering specific Stage
Stage Models - Customization
Menu: Settings
Allowed Domains
UTM Mapping
Branded Search filter
CRM-Based Channel and Source in the Absence of Tracking Activity
CRM filters
FAQ
Glossary
Categories
Some of my deals are flagged with "Unknown". What does it mean?
Data retention
Can I exclude content or websites from being tracked?
How are activity mapped to companies?
What does Visitors, Contacts and Companies mean?
What is a session?
Roles and Permissions
What is the reporting Time Zone?
Why are my dashboards empty?
Agency Partners
Welcome Partner!
Partner Tiers
Referral Guide and UTM tracking
Partner Material
Intro Template for your new clients
Ideal Customer Profile
Co-marketing and account mapping
Contact
Quick learning videos!
Find the content that generates most pipeline
How to set up content categories on Dreamdata
Do you know how your company is generating money?
How to see the value of B2B Google Ads in pipeline and revenue generated
How Content Analytics tracks the influence of content of pipeline and revenue
How to easily build a retargeting audience with Dreamdata
Are you using G2?
Performance vs. Revenue Analytics reports- when to apply them best!
What attribution really is and why you should care!
Helping BDRs break through to the hottest accounts
Dreamdata Content Analytics: Discover the real value of your content
Do you know which of your Marketing activities had the biggest impact on pipeline and revenue?
Which of your emails produce pipeline and revenue?
See the value of SEO in pipeline and revenue generated
How to cut the cost of your Google Search Ads
- 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.