Music Player/Google Analytics

by Posted on

Please click here to view my online Music Player.

What is web/Google Analytics?

Using web analytics on your website is a way to track a range of user interactions such as button clicks and page views. These findings are converted into useful data to be viewed as plain numerical information or, in a more visual form, charts and graphs. Gathering this type of data from a website can be extremely helpful to manage many different aspects such as fixing bugs, figure out gaps in the market and improving usability. The list is plentiful and these tools, if utilised correctly, can greatly benefit the welfare of a business. Google Analytics is a free online service, provided by Google, for users with a Google account to easily set up tracking on their website in just a few clicks. Users need access to their websites HTML and/or JS file to input the tracking script including their tracking ID. Out of all of the analytics services available online, Google Analytics is the most commonly used.

Music Player

To be able to try Google Analytics for myself, I needed to create an online service with events to track. To save time concentrate on the analytics rather than the code, we reused the code from the Cludeo Cards project and adapted it to suit our individual interests. Our brief was to develop a web page where users can click on three options, therefore selecting them and placing them into a separate section further down the page. Due to my love of music, I chose to make a music player. My project allows the user to select a playlist based on genre and click on a song to play it. Then, they are brought to the bottom of the page where there is a ‘Song Playing’ section. In contrast to our Cluedo Cards project, the images of the cards have been replaced with the album artwork, the names of the cards (suspect, weapon or room name) replaced with that of the song in question and I discarded the description so I could add it to another section later on. For the purpose of this project and to get used to tracking different pieces of my website, I needed to more ways for the user to interact and engage themselves. In light of this, in the ‘Song Playing’ section, I added ‘like’, ‘dislike’, ‘add to playlist’ and ‘more information’ buttons to turn it into a more interactive service and give me more ways to gather data.
Using Google Analytics in this personal project would benefit me because once I was able to analyse the final dataset, I could see who clicked where and what buttons were most clicked. Even if this information does not relate to another project directly, for example, they do not do or perform the same task, I can still find similarities. This may be the case in that I have too many buttons on one section of the page and users only click on two out of five. This data can be interpreted by not adding too many options in one place in future projects. Having said this, in this circumstance I had to add buttons to track events because I only have one page to monitor. If I was building a website with more pages I could measure user flow along with other features Google Analytics provides to monitor user journeys through a website.

The Code

The code in this project is mostly mirrored from the last, however, there are some main elements I have changed to give my new website more functionality. For example, with the use of extra jQuery commands, I was able to add smooth toggles and add dialogue boxes. To start with, I added buttons to the playlists to ‘Show’ and ‘Hide’ each one so when the site is loaded and all the playlists are hidden, the site looks more compact and tidy. Another reason for adding the buttons was because I wanted the artwork to be big enough to view comfortably when all 3 rows of 6 images were displayed, amounting to a total of 18, there were too many options being displayed at once. By being able to show and hide each genres playlist, I could keep the size without compromising the minimal feel I had created with the Bulma framework. Here is the relevant HTML:

<h1 class="title">Chill.</h1>
    <button id="showchill" class="button is-danger is-inverted">Show</button>
    <button id="hidechill" class="button is-danger is-inverted">Hide</button>
 Along with the relevant jQuery:
    $("#hidechill").click(function () {
    sendTrackingEvent ("Hide playlist", "Chill");
    $("#chill").hide("slow", function () {
    });
});
 
    $("#showchill").click(function () {
    sendTrackingEvent ("Show playlist", "Chill");
    $("#chill").show("slow", function () {
    });
});
I applied the same principle of code in the ‘Song Playing’ section with the ‘More button. By clicking this, the user is able to view more information about the song being played. These extra pieces of text include any featured artists on the track, the name of the album the song is featured on and the date it was released (if I was able to find out).
Once I had my page set up and I was happy that everything was working accordingly, I could input the Google Analytics code into my JavaScript file to enable tracking. I created a new Google account to use for my university work (as opposed to my personal one) and followed the appropriate channels to gain access to my unique tracking ID and tracking code.
<!-- Global site tag (gtag.js) - Google Analytics -->

<script>
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-110585075-2', 'auto');

    ga('send', 'pageview');

</script>
After inputting this into my code I could start to input the buttons (events I wanted to track. This refers back to the jQuery I included previously in this paragraph where you will see a line of code that started with ‘sendTrackingEvent’. This function is created at the top of the JavaScript:
    functions endTrackingEvent(action, label) {
        ga("send", "event", "Music Player", action, label);
    }
In this example, I have programmed this function to send a tracking event to my Google Analytics profile with the reference to the action being performed and its label. In the ‘Hide’ code block, sendTrackingEvent is followed by “Show playlist” (the action) and “Chill” (the label). The action defines the digital task being performed and the label is a broader task of where this action is being carried out.

The Results

Audience Overview

The audience overview feature in Google Analytics is used to track general interaction with the website. The results show that there were 47 users who visited the site in total and 42 of them are new. The five ‘users’ who have visited prior could be accounted for as classmates logging on again from a computer they previously used to view it or my prior testing on other devices. 68 sessions are the amount of times users interacted with my website for 30 minutes or less without closing the page. The time frame used to measure this can be altered but 30 minutes is the default for Google Analytics. A total of 139 page views is the number of times my website was logged on to. In this case, the bounce rate of my website is irrelevant because there is only one page to view.

Browser & OS/Channels/Devices

The most used browser to view my website on was the in-app mobile Safari browser and I think this is due to my advertisement on social media. If a user is using an iPhone and clicks the link to my website, it will automatically open the browser in Apple’s default browser, Safari. This can be cross-referenced with data in the Channels section, where 25 users opened my website from Facebook and three users from Instagram. This also relates back to the results about Devices, where the top three mobile devices used are all iPhones. Additionally, iPhone features 6/10 times on my device list so it is obviously a popular phone among my target demographic. All of this can be applied to Android Webview being the third most used browser because the rest of the devices in the top ten run Android operating systems.

Engagement

The engagement statistics show that most of my users either visited my site for 0-10 seconds, 31-60 seconds or 181-600 seconds. As my site is a music player, I will be analysing this data in the form of song length. The average song length is around 180 seconds (3 minutes). For people to visit for only 0-10 seconds, this means they easily got bored and left the page almost immediately. 31-60 second visits suggests that people pressed a few buttons, listened to part of one song or smaller parts of multiple songs and exited the page. Lastly, 181-600 seconds means that these users were on my page for the duration of anywhere between 3-10 songs. This is a great turn out because it means that my music player was easy to navigate and people were able to listen to whatever song they wanted in continuation.

Location

Due to my online outreach, my website was able to be viewed by my friends in other countries. Over the years, I have kept in contact with people I have networked with who either live in another country, have moved there or been travelling at the time of these results. of course, the top spot was taken by the UK as the majority of my contacts reside here but I am impressed at the other countries it has reached. If we look into a more precise location data set then we can break down where in the UK my website was viewed. The most views coming from Norwich is not a surprise because my classmates and I were all testing each other out. I was surprised by the second most popular UK location being in London because I didn’t think I knew a lot of people who live there, as opposed to Bury St Edmunds, my hometown, where all my friends live. Having said this, I did tell some of my contacts about this in the middle of the day so if they logged on from their mobile device and were at work, their location would register as elsewhere.

Conclusion

In conclusion, my website reached a large enough audience for the amount of advertising I allocated to it. I am pleased that I used Bulma to develop my site because of the mobile popularity it had. This was an insightful and enjoyable start to Google Analytics and I have only just scratched the surface. I look forward to integrating it into my fututre projects.