Er zijn twee manieren om Learning Analytics trackers te integreren in je leeromgeving
  1. Met een transparant image op een webpagina
  2. Met javascript code in de webpagina

De eerste manier is de 'eenvoudige' manier om trackers te plaatsen op webpagina's. Op deze manier wordt het bezoeken van een pagina bijgehouden. Bijvoorbeeld het bezoeken van de homepage of een pagina met een video erop. Het voordeel van deze manier is dat de trackers geplaatst kunnen worden met tools van de leeromgeving. De docenten zijn met deze tools bekend en kunnen dus zelf de trackers plaatsen.

Met javascript kunnen 'geavanceerde' trackers geplaatst worden. Op deze manier kunnen alle events op een webpagina bijgehouden worden, bijvoorbeeld een klik op een bepaalde link, of het daadwerkelijk starten van een video. Het voordeel van deze manier van tracken is dat meer gedetailleerde informatie verkregen kan worden. Dit gaat ten koste van de gebruiksvriendelijkheid, want het vereist enige kennis van html en javascript om trackers te plaatsen. En niet alle leeromgevingen staan dit toe in hun eigen tools, waardoor docenten dit niet zonder hulp van ict kennis kunnen doen.

Meer over het plaatsen van een image op een webpagina


Daarvoor gebruik je één van de volgende twee integratie manieren:



 
 
 
 
Het plaatsen van een image op een webpagina gaat op de standaard manier van de leeromgeving. In Blackboard Learn gaat dit bijvoorbeeld als volgt:

a. kies het icoon 'insert image'

 


b. kopieer de tracking code in het venster dat verschijnt. Hiervoor gebruik je de eerste optie: 'algemeen tracking pixel'

 

c. Na het klikken op insert wordt de tracker geplaatst. Je ziet het image niet in de pagina, want de tracking is voor gebruikers onzichtbaar. Maar je kunt wel controleren of het image goed staat door de html code te bekijken. Onderaan de pagina zie je de code van het image verschijnen.


 

Je ziet hier HTML code en zou ook de tweede tracking optie 'HTML integratie' hier kunnen gebruiken om rechtstreeks (zoder image tool) HTML aan de code kunnen toevoegen.

Meer over het gebruik van javascript code in een webpagina


De derde optie is de manier om met javascript code een tracker te integreren, zie:

 

Deze code kan in principe zo in een HTML pagina geknipt worden en dan heeft het dezelfde functie als het plaatsen van de HTML code. Op de pagina waar deze code staat wordt de tracker gestart.

De eerste regel code is specifiek voor deze tracker, daarin staat het recept. De tweede regel code is algemeen javascript code die altijd op deze manier gebruikt moet worden.

De code kan op veel andere manieren gebruikt worden.


Bijvoorbeeld voor het tracken van klik op een link, zie dit voorbeeld:

 
 

Je ziet hier drie onderdelen van deze integratie.
  1. bovenaan zie je de link die vier specifieke attributen heeft gekregen, waarvan de onderste drie uit het recept gehaald moeten worden omdat ze deze link specifiek maken.
    1. class="la-track", dat geeft aan dat dit een link is die getracked moet worden
    2. data-verb="accessed", geeft het 'verb' van de activiteit aan
    3. data-object="article", geeft het 'object' van de activiteit aan
    4. data-label="klik link", geeft het 'label' van de activiteit aan
  2. Daarna komt een stukje maatwerk script code om voor alle links op deze pagina met de class="la-track" een activiteit te pushen als er op wordt geclicked. Hier kunnen verschillende events aan een class gehangen worden, in dit geval 'click'. Merk op dat er twee cijfers uit het recept gehaald moeten worden
    1. het nummer van het recept (de 4 in dit voorbeeld)
    2. het nummer van de cursus (de 2 in dit voobeeld)
  3. Vervolgens wordt de standaard learning analytics code geladen, deze kan uit het voorbeeld gekopieerd worden.

 

<a class="la-track" data-verb="accessed" data-object="article" data-label="klik link" target="_blank" href="https://www.surf.nl/binaries/content/assets/surf/nl/kennisbank/2016/infographic_learninganalytics_a4_in-4-stappen.pdf">Bekijk de learning analytics infographic</a>

<script>
la = [];
window.addEventListener('click', function (event) {
    if ((' ' + event.target.className + ' ').indexOf(' la-track ') === -1) {
        return;
    }

    var el = event.target;
    la.push(['track', 4, el.getAttribute('data-verb'), el.getAttribute('data-object'), 2, el.getAttribute('data-label'), el.getAttribute('data-week'), el.getAttribute('data-subject')]);
}, true);
</script>

<!-- load la code -->
<script src="https://la-experiment.surfnet.nl/js/tracker.js" async defer></script>

 

Track het starten van een video


Een ander voorbeeld van javascript integratie is het tracken van het starten van een youtube video.


 

Je ziet ook hier drie onderdelen van de integratie.
  1. Bovenaan zie je een stuk maatwerk script waarin de video wordt gedefinieerd en verschillende events worden herkend, waarna de la code wordt uitgevoerd.
    1. De video wordt geidentificeerd met de videoId van youtube. (en een height en width kunnen worden meegegeven)
    2. in dit voorbeeld wordt het event 'playing' gebruikt om een tracker te maken: accessed-video
    3. Merk op dat hier voor de duidelijkheid alle events benoemd worden die getracked kunnen worden. Daarnaast worden events gelogd op de console. Dat is in productie niet nodig.
  2. Vervolgens wordt de standaard learning analytics code geladen en ook de standaard youtube code
  3. Als laatste zie je een <div> met id=player. Dat geeft de positie aan waar de video in de html wordt afgespeeld.


 <script>
// init player and la
var player;
la = [];
// from: http://stackoverflow.com/questions/10580388/youtube-embedded-video-start-stop-event
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: 'BBs62PLbNnY',
        events: {
            'onStateChange': function (event) {
                switch (event.data) {
                    case -1:
                        console.log ('unstarted');
                        break;
                    case 0:
                        console.log ('ended');
                        break;
                    case 1:
                        console.log ('playing');
			la.push(['track',4,'accessed','video',2,'start video']);
                        break;
                    case 2:
                        console.log ('paused');
                        break;
                    case 3:
                        console.log ('buffering');
                        break;
                    case 5:
                        console.log ('video cued');
                        break;
                }
            }
        }
    });
}
</script>

<!-- Load youtube code and tracker code -->
<script src="https://la-experiment.surfnet.nl/js/tracker.js" async defer></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"> </script>

<!-- the player -->
<div id="player"></div>


  • No labels