Have you ever wondered: wouldn’t it be nice if all my Google Analytics hits played a sound for every hit? Me neither. But it’s almost April 1, and that’s the perfect excuse to figure out how we can play a sound for a Google Analytics hit.

Playing a basic tone for a hit

It turns out it’s pretty easy to generate a tone in JavaScript. You can do so by leveraging the AudioContext API. I’ve created a function that will make it easier for you to play a tone in JavaScript, and for your convenience, formatted in a GTM Custom HTML tag:

<script>
    var context = context || new (window.AudioContext || window.webkitAudioContext)();

      function playTone(frequency, duration, timeout){
          setTimeout(function(){
              var osc = context.createOscillator(); // instantiate an oscillator
                  osc.type = 'sine'; // this is the default - also square, sawtooth, triangle

                  osc.frequency.value = frequency; // Hz
                  osc.connect(context.destination); // connect it to the destination
                  osc.start(); // start the oscillator
                  osc.stop(context.currentTime + duration); // stop 2 seconds after the current time
          }, timeout);
      }
  </script>
  

When you add this tag to your GTM container. Make sure to load it on Page View and set the priority to high.

After that, you’ll have to create a customTask to play a tone for each hit. Create a custom JavaScript function variable, let’s call it js - customTask - play tune, and place the following code:

function() {
    return function(model) {
     console.log('customTask tune:');
     hitType = model.get('hitType');

     if(hitType === 'pageview'){
       window.playTone(660, 0.1, 250);
     } else{
       window.playTone(440, 0.1, 250);
     }
    }
  

Notice how this code calls the playTone function with a 660Hz tone for pageviews and a 440Hz tone for any other hit (generally events).

After this step, all you have to do is add the variable as a custom task to your analytics tag(s).

Good job, you have just added audio to your GA tracking!

Adding the Super Mario tune

Now that you’ve added some sound, it’s time to add some fun as well! Wouldn’t it be nice to hear the Super Mario tune when GA sends a pageview? The hardest part of adding a recognisable theme is to find the right tones for the tune. Luckily, Google is my friend, and I quickly found the Mario tone in sine frequencies. With that out of the way, we need to edit both the tag that holds the playTone function and js - customTask - play tune variable.

First, in your playTone tag, add the following line just below your var context line:

  window.totalDelay = 0;
  

We’ll use this variable to add a delay to each note so they won’t go off at the same time. Second, replace the js - customTask - play tune variable with this code:

function() {
    return function(model) {
      hitType = model.get('hitType');
      if(hitType === 'pageview'){
        var song = [
          {frequency: 660, length: 0.1, delay: 150},
          {frequency: 660, length: 0.1, delay: 150},
          {frequency: 660, length: 0.1, delay: 300},
          {frequency: 510, length: 0.1, delay: 300},
          {frequency: 660, length: 0.1, delay: 150},
          {frequency: 770, length: 0.1, delay: 300},
          {frequency: 380, length: 0.1, delay: 575},
        ]

        for (item in song){
          totalDelay += song[item].delay;
          window.playTone(song[item].frequency, song[item].length, totalDelay);
        }
      }
    }
  }
  

I’ve tested the tone variables from the post mentioned above and tweaked it for optimal recognition. As mentioned, the code uses totalDelay to add up the delay per tone it needs to play. This way, the tune is nice and recognisable.

It’s just a start

We currently only play the beginning of the famous tune when a page view comes in. It’s live on this page, so if you haven’t already, turn up your audio and hit refresh. The possibilities are endless. How about playing that suspenseful underground level tune when someone enters the checkout, or using the tune you hear when you end a level for every transaction? Anyway, we’ve enabled the Mario tune on this page so you can test it!

Happy Analysing! And don’t forget to turn your audio up!