Demo

Welcome to the Burt agent demo page!

This page is tracked with the Burt agent. All gray boxes with a glowing border are units. On your site, a unit is most likely an ad, but could also be a video or simply an area. At the bottom you see the Burt dev panel, which provides instant feeback on what is tracked.

The integration code for this page is very simple. The main integration code is located in HEAD, below the agent SCRIPT tag. It looks like this:

window.burtApi.startTracking(function(api) {
  api.setTrackingKey('DOC68JMSP025', 'docs.burt.io');
  api.setDomain('docs.burt.io');
  api.setCategory('Demo');
  api.addCloudKey('XXXXXXXXXXXX');
  api.addCloudKey('YYYYYYYYYYYY');
  api.startUnitTracking();
  api.trackById('skyscraper', { name: 'skyscraper' });
  api.annotate('foo', 'bar', 'baz');
  api.connect('foo', 'bar', 'baz');
  api.withUnits('skyscraper', function(unit) {
    unit.annotate('foo', 'bar', 'baz');
  });
  api.withUnits(/group-\d/, function(unit) {
    unit.connect('foo', 'bar', 'baz');
  });
});

There is also this independent piece of tracking code further down:

window.burtApi.trackById('bottom', { name: 'bottom' });

You might wonder how it is possible to track almost ten units with just that piece of code. The magic is the call to api#startUnitTracking. When that function is called, all DIV tags on the page with class burt-unit are tracked as units. If you take a look at the source code, you will see tags such as this:

That piece of html tells the agent to track that element as a unit. Notice the data-name attribute, which is used to give the unit a name. All units requires a name.

Mauris rutrum mi ac auctor faucibus

Mauris rutrum mi ac auctor faucibus. Proin et luctus dolor. Morbi id malesuada magna. Quisque ac leo faucibus, blandit est vitae, lacinia odio. In hac habitasse platea dictumst. Nulla ac dictum augue. Nunc fermentum posuere ligula non viverra. Suspendisse rutrum, turpis non facilisis euismod, tellus purus feugiat odio, vel iaculis felis nisi et nibh. Mauris volutpat rutrum felis eu euismod.

Etiam ut est dignissim, mattis enim nec, mattis libero. Sed tempor egestas leo sed lobortis. Mauris vel nisl at sapien porta posuere. Donec odio lorem, facilisis faucibus pharetra dapibus, condimentum non leo. Phasellus ut turpis ipsum. Pellentesque mattis fringilla nisl, eu auctor magna scelerisque ac. Integer tempor enim a sapien vestibulum, eu tincidunt metus porta. In auctor libero turpis, nec feugiat sapien dapibus ut. Sed elit erat, elementum ac mattis ac, ultrices quis mi. Morbi non turpis vitae felis facilisis bibendum vitae at sapien. Pellentesque at purus ac nunc convallis placerat quis in turpis. Pellentesque sed facilisis lectus.

Donec iaculis nibh congue, ornare nulla eu, porta quam. Aliquam erat volutpat. Nullam ornare ut lorem id malesuada. Proin tristique mauris purus, a volutpat erat dignissim sed. Fusce sapien tellus, fermentum sit amet imperdiet a, tristique ac quam. Fusce accumsan egestas mi nec fringilla. Sed porttitor sed metus ut ornare. Proin leo justo, hendrerit ac fringilla eget, congue id odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus in rutrum lorem.

Cras elementum enim condimentum dui facilisis, at interdum erat cursus. In ut quam at erat laoreet consequat ut vel leo. Suspendisse molestie mattis massa ac vehicula. Nulla at lorem eget dui malesuada auctor at non turpis. Donec facilisis lorem at quam mollis porttitor. Ut hendrerit imperdiet tristique. Sed lectus eros, aliquet sed quam sed, placerat laoreet lacus. Pellentesque dignissim felis nulla, eget vehicula eros faucibus quis.

Nunc rutrum dapibus justo

Nunc rutrum dapibus justo, id viverra quam dictum eget. Phasellus interdum non sapien in aliquam. Nulla eleifend, augue a dapibus placerat, lacus est volutpat risus, a placerat turpis velit in nulla. Integer ultrices mauris odio, vel tincidunt turpis dictum in. Mauris quis ligula massa. Maecenas vitae dictum ipsum. Duis sit amet diam in libero sagittis mollis id quis velit. Phasellus sit amet eros massa. Donec diam dolor, imperdiet ac aliquet ac, adipiscing vitae ante. Mauris laoreet, erat vel lobortis lacinia, dolor est tristique elit, posuere mattis ante orci sed nulla. Phasellus sed condimentum ipsum. Aliquam dignissim lacus hendrerit luctus sollicitudin. Nunc leo justo, sollicitudin eu tempor sit amet, tempus ac massa. Donec viverra leo malesuada, pulvinar nisi et, faucibus turpis.

Phasellus erat mi, adipiscing sed hendrerit quis, tempor vel quam. Etiam faucibus aliquam ante et aliquet. Fusce ac ante ante. Mauris volutpat porttitor erat, aliquam tincidunt mi. Nullam rhoncus, mauris sed vulputate posuere, nisi tellus iaculis nunc, sed tempus nunc sem eget nulla. Nullam orci mauris, aliquet ut leo nec, semper tristique ante. Maecenas eleifend nisi suscipit justo aliquet, in egestas mi aliquam. Proin nec justo aliquam, tincidunt purus ac, placerat lacus. Phasellus id blandit massa, ut tincidunt orci. Nullam feugiat purus id vehicula condimentum. Sed elementum dui nec velit tristique, tincidunt lobortis felis rhoncus.

Vestibulum congue est eget scelerisque dapibus. Nullam in felis eu mauris venenatis consequat. Phasellus accumsan adipiscing justo nec accumsan. Praesent pulvinar dignissim enim. Suspendisse vitae ante ut est posuere suscipit. Donec sit amet mattis elit. Etiam mattis pharetra nibh. Sed vitae sem eu eros dictum gravida quis nec lorem. Sed id varius enim. Sed vehicula ligula sit amet arcu porta commodo. Suspendisse consectetur mi eget arcu blandit, et varius odio laoreet.

Sed eu sagittis lorem. Pellentesque hendrerit metus vitae sem tincidunt viverra. Pellentesque vel risus ac magna egestas faucibus. Donec venenatis turpis ac tellus iaculis, vel varius mi porttitor. Aliquam consequat nulla sit amet nisl tincidunt venenatis. Fusce sed quam tincidunt, sagittis leo quis, malesuada mauris. Cras at mauris vel eros scelerisque dignissim id id justo. Fusce scelerisque, sem ut congue egestas, felis metus vulputate nunc, vitae convallis nisi erat placerat felis. Nulla facilisi. Nulla sodales vehicula magna a ornare. Cras mattis dui sed augue suscipit varius non et mi. Aliquam erat volutpat. Nulla tincidunt in diam vitae pretium. Vivamus posuere malesuada tellus ac condimentum. Donec tristique velit mollis nulla sagittis, sed luctus felis ultrices.

Sed tempus blandit purus

Sed tempus blandit purus, eget congue sapien hendrerit pulvinar. Ut sodales quis dui sed rhoncus. Ut placerat ipsum et venenatis tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse magna nisi, mattis a diam eu, tempus pharetra arcu. Curabitur ullamcorper iaculis tempus. Nullam posuere, sem non dapibus convallis, enim lacus luctus odio, non lacinia diam nisi id tellus.

Cras eu sagittis magna. Nulla volutpat magna sapien, non rhoncus diam consequat vel. Ut nisl arcu, mattis sit amet mi id, hendrerit pulvinar nisl. Donec tincidunt neque a purus pharetra ultrices. Suspendisse at faucibus lectus, et ultrices enim. Aenean a elementum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla interdum elementum est eget consectetur. Phasellus eleifend non leo vel vulputate.

Vivamus quis sem risus. In hac habitasse platea dictumst. Nam nec eros in magna tempor pellentesque. Mauris interdum vulputate magna, sed tempus dui hendrerit ut. Duis tristique lacinia sem. Integer eu odio at augue aliquam accumsan. Cras a congue erat. Pellentesque sollicitudin felis elit, sed elementum dolor consectetur in. Pellentesque condimentum ante ac diam porta, et ultrices tortor luctus.

Nullam nec urna eget ligula condimentum accumsan ac ac metus. Vivamus elit purus, auctor non ultrices eget, pretium et sapien. Vestibulum lacinia libero est, mollis posuere turpis euismod vel. Donec quis auctor dolor, aliquet luctus mauris. Pellentesque purus mi, euismod sed suscipit eget, dignissim ut elit. Pellentesque pulvinar fringilla posuere. In ullamcorper nisi ipsum, at rutrum arcu pretium ac. Pellentesque mattis nisi at lectus suscipit, eu cursus arcu facilisis. Nullam at rhoncus risus. Aenean a risus semper, lobortis justo id, mollis velit. Maecenas vel eleifend urna.

Aliquam metus sapien, commodo vitae nunc a, sodales pulvinar libero. Fusce convallis, nulla sit amet euismod viverra, erat diam tincidunt arcu, eleifend ultrices eros neque fringilla enim. In sed orci urna. Duis nec odio lorem. Phasellus bibendum, magna et pharetra lobortis, urna est auctor purus, auctor sollicitudin odio justo et tellus. Vestibulum in lacus porttitor nulla interdum pulvinar ac quis nibh. Cras sed euismod justo. Sed tempus enim nec volutpat porttitor. Ut molestie tempus mi, at ultricies mi adipiscing a. Nunc feugiat, orci at ultrices pulvinar, elit augue accumsan sem, malesuada mattis orci urna pellentesque diam. Suspendisse mattis aliquet nibh a tempor. Integer cursus, massa ut porta eleifend, eros felis gravida elit, at pharetra nunc nulla ac eros.

Aenean lacinia purus quis justo egestas semper

Aenean lacinia purus quis justo egestas semper. Maecenas non mauris id mauris tincidunt mollis nec consequat lectus. Morbi vel tincidunt ipsum. Sed eleifend quam sed erat bibendum, ut dignissim velit tempor. Nulla aliquet felis mattis facilisis posuere. Pellentesque sed urna id libero molestie aliquet. Duis scelerisque magna quis urna posuere, nec gravida erat tincidunt. Praesent sollicitudin, quam sit amet imperdiet condimentum, nulla diam ultricies justo, quis commodo diam sapien eget urna. Phasellus ultrices, diam sed adipiscing accumsan, diam lacus tempus tellus, sed ullamcorper ante magna quis lectus. Morbi in tincidunt nisl, sed accumsan diam. Nunc in mollis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam felis mi, scelerisque et turpis eget, blandit tempus tellus. Maecenas mauris tortor, viverra vel arcu et, rhoncus rutrum ligula.

Sed cursus lacinia ipsum vitae ultricies. Fusce eu rutrum sapien. Mauris rhoncus purus sed odio ornare, laoreet ornare nibh accumsan. Vestibulum at cursus lorem, vitae congue nulla. Etiam aliquam faucibus neque non faucibus. Sed porttitor mauris et urna pellentesque, vel venenatis purus congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus metus turpis, pellentesque eu pharetra nec, euismod in lorem.

Maecenas dolor nisl, posuere eget consectetur vel, vehicula rutrum est. Nulla suscipit aliquet dolor et pharetra. Donec vehicula congue nunc id tempor. Vestibulum a imperdiet dolor. Sed et pulvinar orci. Aliquam quis sapien non ligula scelerisque aliquam sit amet at nisl. Vestibulum eget semper mi, eu vestibulum diam. Pellentesque sed est nec dui dignissim mollis. In vel rutrum massa. Nullam a massa tempus, tincidunt elit vel, vestibulum velit. Nullam euismod ligula odio. Etiam iaculis varius iaculis. Praesent vitae augue vehicula, tempor nisl eget, faucibus metus. Nunc dignissim consectetur est, eget pellentesque nisi sollicitudin sit amet. Morbi bibendum fermentum arcu ut egestas. Nunc auctor euismod hendrerit.

Pellentesque aliquet congue purus

Pellentesque aliquet congue purus, eu rhoncus lorem egestas nec. Nunc sed diam neque. Sed convallis neque nec vehicula mattis. Mauris porttitor eros a enim tincidunt ullamcorper. Nullam vestibulum bibendum ante, id vestibulum sem consectetur sit amet. Vivamus tempus, ante id aliquet placerat, justo justo mollis mi, nec aliquam risus nisl in dui. Vivamus et tristique lorem. Aliquam mattis urna non neque luctus, in ornare nibh vulputate. Proin lobortis magna nec lacus placerat, a congue massa elementum. Donec accumsan malesuada est, sit amet aliquam tellus sollicitudin quis.

Phasellus libero dolor, iaculis in euismod sed, rutrum et massa. Nam laoreet, nisl ut aliquam laoreet, velit tortor egestas eros, id bibendum risus ipsum nec mi. Fusce lobortis dolor quis nulla tincidunt, nec consequat enim mattis. Nullam hendrerit gravida tellus in rutrum. Aenean iaculis quis metus semper hendrerit. Donec laoreet vestibulum lectus, sit amet rhoncus ipsum pulvinar id. Sed porta diam eget ante dignissim bibendum. Suspendisse nec lobortis quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nam dignissim auctor elementum

Nam dignissim auctor elementum. Nam sollicitudin, nisi congue suscipit ultrices, diam libero eleifend mi, id lacinia leo justo eu eros. Phasellus luctus pretium tellus ut tincidunt. Aliquam ac nisl turpis. In hac habitasse platea dictumst. Sed ac turpis eget libero pharetra porttitor ut mattis lacus. Sed elementum non orci ut eleifend. Etiam eu dolor leo. Nam scelerisque fringilla quam, non vulputate turpis tincidunt nec. Cras et nisl vulputate, sollicitudin massa ut, varius est. Praesent tincidunt tortor non velit lacinia gravida. Phasellus a tortor id nulla lobortis malesuada et a nulla. Suspendisse vel odio vel tortor consectetur mollis in eget est.

In at tincidunt metus, vel luctus lorem. In euismod felis eget commodo fringilla. In ut massa nisl. Curabitur nec libero quis arcu feugiat aliquam a vel arcu. Vestibulum vel mollis nulla. Vivamus turpis velit, pharetra non rutrum in, suscipit nec orci. Quisque id nunc et erat accumsan semper vel sed metus. Sed varius luctus mattis. Aliquam erat volutpat. Donec vestibulum, nibh eu aliquet viverra, orci libero pulvinar turpis, vitae ultrices erat mauris at quam. Nunc luctus mauris id lorem ultrices fringilla.

Proin mollis

Proin mollis, turpis quis sodales cursus, leo lorem laoreet orci, in rutrum orci tellus in velit. Integer at aliquet tellus. Donec in laoreet ipsum, sit amet vestibulum libero. Praesent erat magna, vulputate non luctus ac, vulputate ac diam. Duis id ligula a erat ullamcorper facilisis in eget est. In massa dui, convallis sed feugiat quis, feugiat in orci. Praesent mollis posuere est sit amet varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet dolor eget sodales elementum. Proin tristique rhoncus ligula pretium tempor.

Proin tempor, metus sed tempus porta, neque libero auctor urna, vitae dapibus nisl nibh quis mi. Fusce placerat suscipit lectus, sit amet tristique sapien rhoncus nec. Aenean pharetra enim vel magna porta, et suscipit mi aliquet. Donec venenatis tincidunt dolor eget consequat. Integer sed dui posuere, suscipit quam et, fringilla elit. Donec pretium vehicula augue, eget congue tortor pulvinar sit amet. Nullam neque diam, elementum vitae sem ut, eleifend porttitor erat. Nullam quis felis in lorem mattis faucibus. Duis leo dui, malesuada et semper dignissim, auctor at neque. Aliquam molestie iaculis sapien, sed porttitor urna. Nulla congue, est et sagittis consequat, justo lacus dapibus nisl, non fringilla erat risus vel arcu. In posuere mattis auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Mauris bibendum at neque ac elementum. Mauris ut erat nibh. Mauris lacinia velit quis augue placerat scelerisque. Maecenas vitae aliquet risus. Praesent ultrices lacinia massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur a massa commodo pretium.

Etiam gravida tellus sit amet placerat gravida

Etiam gravida tellus sit amet placerat gravida. Nulla at lorem eget massa viverra fermentum. Aliquam ante ante, ultricies id tempor eget, aliquet sit amet neque. Vivamus bibendum purus id metus condimentum, a feugiat diam pharetra. Nullam suscipit lectus in interdum fringilla. Mauris et enim id leo dictum iaculis ac sit amet orci. Suspendisse potenti. In tincidunt vulputate orci, id posuere arcu condimentum posuere. Praesent eget lectus sit amet risus rutrum hendrerit sed a sem. Donec urna nisi, iaculis in adipiscing quis, convallis non elit. Vivamus non commodo turpis. Duis faucibus elit ac velit posuere bibendum. Maecenas imperdiet diam vestibulum orci viverra, a mollis lectus sollicitudin. Praesent mi turpis, dapibus ac dapibus in, hendrerit sed enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Maecenas volutpat, urna nec suscipit cursus, purus metus tempor quam, consectetur faucibus urna erat vel lorem. Praesent vitae leo ut tellus tincidunt ultricies sit amet vel leo. Mauris luctus vel purus ac facilisis. Nulla purus mi, malesuada a fermentum in, pharetra imperdiet mauris. Praesent quis eros a erat hendrerit volutpat ac fringilla orci. Curabitur venenatis a quam nec rhoncus. Suspendisse potenti. Pellentesque fringilla, sapien non sagittis volutpat, sapien odio bibendum turpis, eget varius mi lacus quis nunc. Ut et dolor purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel ipsum at risus fringilla pharetra. Pellentesque risus nibh, auctor ut ultrices nec, lobortis et dolor.

Cras nec luctus magna. Fusce fringilla faucibus massa, quis rutrum leo porttitor ut. Aenean et ultricies eros. Donec rutrum cursus libero sit amet tristique. Maecenas aliquet risus erat, mattis porta lacus feugiat in. Sed consectetur facilisis quam nec pretium. Mauris auctor vitae elit eu gravida. Nunc laoreet, lacus sed varius lobortis, mauris mauris auctor mi, non rhoncus tellus velit vitae metus. Maecenas rutrum sollicitudin orci ut adipiscing. Duis eget auctor augue, nec blandit nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas quis accumsan urna, quis blandit lectus. Proin vel aliquet elit, in iaculis ligula.