The Journey to Garden’s Gate
A Spotify Affinity Campaign for Greta Van Fleet
I had the opportunity to work with Greta Van Fleet again to stir up excitement around their now released new record The Battle at Garden’s Gate. I presented many ideas and ended up writing proposals for a few of them. What we landed on was a Spotify affinity campaign, akin to my work for Girl In Red and Hurts, which detected how often and to what velocity fans were recently streaming Greta Van Fleet. Fans are then scored and encouraged to share their “journey progress” on socials. I like these concepts because they are a great way to get fans to re-engage with a band’s catalog while preparing for the release of new music.
How far are you from Garden’s Gate? Find out and keep reading to learn how the campaign came together.
Algorithm
The algorithm for deciding how much Greta Van Fleet a user has been streaming is very similar to past campaigns. We look at a user’s Top 50 recently streamed songs on Spotify (updated every 24 hours) and see how often and in what position Greta Van Fleet appears. It is important to understand how many total unique Greta Van Fleet tracks exist on Spotify as this will affect how the user’s score is calculated. Of course, that number changes once the full album is distributed. I should probably write a Netlify build script which checks for this number each time the web app deploys, but for now I simply provide it manually. So, on a high level: declare the total amount of tracks, calculate the total possible points, and then calculate how many of those points the user has earned.
// Total tracks on Spotify
let max = 26// Possible points a user can reach
let totalPoints = 0for (let i = tracks.length; i > tracks.length - max; i--) {
totalPoints += i
}// The user's points
let userPoints = 0tracks.forEach((track, i) => {
if (track.artists.map(artist => artist.id).includes('ARTIST_ID')) {
userPoints += tracks.length - i
}
})// Final user score
let score = Math.min(Math.max(userPoints / totalPoints * 100), 0), 100)
For more info on this technique, check out the Hurts case study.
Sharing
Encouraging and making sharing simple is a crucial part of this campaign. I recently did a deep dive on building what I consider the ideal sharing flow in a three part series called The Sharing. Check that out for a basic understanding on generating and sharing dynamic images on the web. This app is built in a similar manner. For Instagram, we use HTML5 canvas to generate both story and feed images. For Twitter and Facebook, we generate meta images in realtime when requested using Serverless functions. In this dev blog, I’d like to talk about a few aspects that make this campaign unique.
Cropping
While reading through the incredible brand bible for The Battle at Garden’s Gate, I was drawn to the expansive landscape artwork and the note that it should be cropped in interesting ways for design images. This is used to great effect in the album booklet. I wanted to give fans the opportunity to do this cropping themselves so I turned to the well written Croppie plugin to do this. Croppie has some great documentation on the plugin which I recommend checking out. Since I was generating images both on the client and via serverless functions, it was important that I keep track of just the crop points for future cropping (using Canvas and ImageMagick.) Luckily, Croppie has an event that fires each time the user interacts with the plugin and a method to get those points.
this.$el.addEventListener('update', event => {
// this.croppie.get().points
})
I just stored those using Vuex for future use.
Symbol Selection
One of the first UX experiments I sent the client is the above CodePen.IO. In addition to cropping the landscape, I wanted to grant users the opportunity to choose one of the track symbols to represent them on their shareable images. I just love CSS Scroll Snap for this as it works very intuitively for users. The symbol selection component I ended up using on the app is much simpler but the usage of Scroll Snap was the same.
#symbols{
display: flex;
height: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
width: 100%;
}#symbols .symbol{
scroll-snap-align: center;
}
Check out the CodePen for an idea of how to customize it and how to understand which symbol is currently in focus.
Meta Protection
Each step of the user journey obtains a fragment of personalized data: their name and score via Spotify login, the landscape crop points, and their symbol of choice. In order to dynamically generate the meta share, we need to pass these parameters to a Lambda function. However, you don’t really want to make that URL structure easily understood or modifiable, as users may spoof their scores. Now, this is not something I’m not going to lose sleep over, but I thought it would be nice to obscure the params somehow.
I decided to use CryptoJS and AES to encrypt the parameters into a string which could be interpreted with a key by my serverless function. This took a bit of trial and error but in the end, it worked pretty well and allowed me to avoid storing these parameters in a database. 🙏🏻 In order to keep the encrypted string small, I used a semicolon delimiter like any CSV file. Here’s what encryption looks like:
let data = 'Lee Martin;100;0;0,0,1080,1080'let encrypted = CryptoJS.AES.encrypt(data, "password")let id = encrypted.toString()
Then, on the serverless function, I could decrypt the string with my password to get my parameters again.
let data = CryptoJS.AES.decrypt(id, "password")let params = data.toString(CryptoJS.enc.Utf8).split(';')// params[0] = name
// params[1] = score
// params[2] = symbol
// params[3] = crop
Props to CryptoJS for being a perfectly simple way to pull this off.
Thanks
Greta Van Fleet has some of the best fans in music. Within minutes of the campaign being launched, fans had already reverse engineered the algorithm on Reddit. 😅 It reminds me of my early years building campaigns for The Mars Volta. Thanks so much to the lovely folks at AMFM Management and Republic Records for bringing me in on this campaign. Congratulations to Greta Van Fleet for releasing this incredible new record. I can’t wait to see it performed on tour. Stream The Battle at Garden’s Gate today.