Breathe Data
into Your Website

Breathe Data into Your Website

Dead simple, serverless service for building data-driven websites.
people visited this website.
of them tried the first example.
They tried more examples
on the Docs page times.
The most popular example there is
You tried examples
in your previous visits.
// Create a public data feed
var feed = DD.data.feed('Total Visitors Count');
feed.select(
DD.data.datapoints.property('visitorID').countDistinct().as('visitorsCount')
);
// Read the data feed
DD.reader.read (feed, {}, function(response){
var el = document.querySelector('.result-1 .placeholder');
el.innerHTML = response.results[0].visitorsCount;
window.onExampleReady();
});
// Filter Visits
var visits = DD.data.segment('Tried the Example');
visits.where ( DD.data.datapoints.metaevent('Home.Example').equals('example-1'));
// Create a public data feed
var feed = DD.data.feed('Total Visitors Count');
feed.select(
DD.data.datapoints.property('visitorID').countDistinct().as('visitorsCount')
).from(visits);
// Read the data feed
DD.reader.read (feed, {}, function(response){
var el = document.querySelector('.result-2 .placeholder');
el.innerHTML = response.results[0].visitorsCount;
window.onExampleReady();
});
// Filter Visits
var visits = DD.data.segment('Tried the Example');
visits.where ( DD.data.datapoints.metaevent('Home.Example'));
// Create a public data feed
var feed = DD.data.feed('Total Docs Examples Count');
feed.select(
DD.data.datapoints.metaevent('Docs.Example').count().as('examplesCount')
).from(visits);
// Read the data feed
DD.reader.read (feed, {}, function(response){
var el = document.querySelector('.result-3 .placeholder');
el.innerHTML = response.results[0].examplesCount;
window.onExampleReady();
});
// Filter Visits
var visits = DD.data.segment('Tried the Example');
visits.where ( DD.data.datapoints.metaevent('Home.Example'));
// Create a public data feed
var feed = DD.data.feed('Top Examples');
feed.select(
DD.data.datapoints.metaevent('Docs.Example').count().as('examplesCount'),
DD.data.datapoints.metaevent('Docs.Example').as('example')
).from(visits).orderBy(
DD.data.feedColumn('examplesCount').desc()
).limit(1);
// Read the data feed
DD.reader.read (feed, {}, function(response){
var el = document.querySelector('.result-4 .placeholder');
el.innerHTML = response.results[0].example;
window.onExampleReady();
});
// Create a feed but prevent retrieval of one of the columns
var feed = DD.data.feed('Tried Examples by each Visitor');
feed.select(
DD.data.datapoints.property('visitorID').protect(),
DD.data.datapoints.metaevent('*.Example').count().as('examplesCount'),
);
// Filter the results
var query = DD.data.feedQuery().select(
DD.data.feedColumn('examplesCount')
).where(
DD.data.feedColumn('visitorID').equals(DD.visit.getVisitorID())
);
// Read the data feed
DD.reader.read (feed, query, function(response){
var el = document.querySelector('.result-5 .placeholder');
el.innerHTML = response.results.length>0 ? response.results[0].examplesCount : 0;
window.onExampleReady();
});
Prev Try it Next See code

How does it work?

DataDrivenJS is like a database that fills in with the data that usually ends up locked in Google Analytics, but here you can conveniently read it using JavaScript.
  • Tracking
  • Reading
  • DD.Console
<script src="DD.js"></script>
  • My Website
<script src="DD.js"></script>
DD.reader.read(feed,
Public API

No Authorisation
Required

Fast access limited to the data you published

Tracking Endpoint

Private API

Authorisation
Required

Full access
to all your data.

  • Sign up the copy the DD.js script, or install it with npm.
  • Add the DD.js script to your website.
  • The script will track what users do on the website.
  • You can use Javascript API to track more data or include data sent to Google Analytics
  • All this data can be used anyway you want.
  • To access the data, you need to sign in to the Console and open DevMode.
  • Once in DevMode, you can build new data-driven features.
  • Simple JavaScript API allows you to select and aggregate your data.
  • Data is read from public Data Feeds you create.
  • No authorisation is needed to read existing Data Feeds.
  • However, you must be authorised to create a new Data Feed.
  • New Data Feeds can only be created in DevMode with active connection to the Console.
  • If you are connected, an authorised request will be sent to create the Data Feed.
  • Request to Private API are slower, but you only need to run them once.
  • You can schedule how frequently Data Feeds should be updated.
  • Created Data Feeds are distributed to servers in multiple locations for rapid access.
  • A second later, you can try again.
  • The request takes only milliseconds.
  • This time, the Data Feed is returned...
  • and you can use it on your website.