Managing a Content Reveal Campaign for Asking Alexandria with Contentful

Featuring their new single “The Violence”

“The Violence is coming”

A content reveal campaign involves revealing a series of (image, audio, and or video) teasers over a period of time to build up excitement for the final reveal of something like a new video or album announcement. It works exceptionally well because the bite sized pieces of content are easy to consume and help establish the timeline of the final reveal. You can combine it with a countdown clock for good measure and create a hype machine that any industry can take advantage of.

I’ve been doing content reveal campaigns for a very long time and learned the hard way that one of the trickiest parts to manage is making sure pieces of content aren’t revealed too early. In fact, I can remember an early mistake in which fans dissected the code and started guessing the urls of audio files. The lesson? If you want to keep content secure on the Internet, don’t put it on the Internet. 😅 Of course, this tactic means that someone will need to manually upload and activate new pieces of content as they are revealed. And if I don’t have the time to do that, it would require me to build an entire admin system and educate the client on updating the site.

A few weeks ago, I received a project brief for another content reveal campaign and thought this might be a good opportunity to strive for a modern solution to this classic problem. The client in question was Asking Alexandria and the reveal campaign was leading to the premiere of their incredible new grindhouse inspired music video for The Violence. The assets for our reveal campaign included a bad ass video premiere poster and eight equally ridiculous video clips.

Our agreed upon solution involved creating an experience which slowly revealed one of the eight quadrants of the poster. If a user clicked on one of these revealed sections, a teaser video would begin to play. Simple stuff.

I’ve used the content management system Contentful on many recent metadata content campaigns, including Motown. It integrates perfectly into my platform of choice, Nuxt.js, and clients have received and understood its user interface well. Up until this point, I’ve only used Contentful for data purposes but I knew that it also had a solution for media assets which I was eager to explore. As with any Contentful campaign, this work began by establishing a content model for our revealed quadrants. I decided to call this model “square” and give it the following fields:

• Position: This field mostly existed to help the client understand which square related to which section on the poster. One being the top left and eight being the bottom right.
• Locked: This was a true or false boolean which the client could switch on and off to decide if a square was revealed or not.
• Image: The associated image section from the poster.
• Video: The associated video clip.

Contentful has a great post about working with media in their interface but it really is quite intuitive. Clients simply needed to go to the Content tab, locate the appropriate square, add the associated image and video, and flip the locked switch to false. Finally, there was a big blue “Build” button which integrated directly into the Netlify hosted experience and rebuilt the site based on this adjustment to the data. While I handled the first few reveals to produce a proper set of instructions, the client managed the large majority.

If you’re curious about how Contentful was integrated into the actual website, take a look a this post which covers how I integrate the service with Nuxt using the asyncData method.

How to use asyncData to Integrate Contentful into Nuxt

If you consider each square of the poster a card with two sides, the HTML construction of each included both a front and back which were visibly toggled on a click of the parent div.

<div class="square unlocked">
  <div class="front">
    <img src="image.jpg">
  </div>
  <div class="back" style="display:none">
    <a href="#" class="full">
      <img src="/images/fullscreen.svg">
    </a>
    <video playsinline loop>
      <source src="video.mp4">
    </video>
  </div>
</div>

If we were flipping to the back of the card, we would also play the associated video using the video.play() method. On the flip side (literally,) we would pause the video using video.pause(). On the client’s suggestion, we also included the ability for users to go fullscreen with the clip. Luckily, web standards have provided us with an API that allows exactly this. Just be prepared to if..then your way to the appropriate method.

if(video.webkitEnterFullScreen) {
  video.webkitEnterFullScreen()
} else if(video.requestFullscreen) {
  video.requestFullscreen()
} else if(video.mozRequestFullScreen) {
  video.mozRequestFullScreen()
} else if(video.msRequestFullscreen) {
  video.msRequestFullscreen()
}

Thanks to the Asking Alexandria team for the opportunity to help me promote this incredible video. I kept this post brief but please let me know if you have any questions about the app. In the meantime, here’s “The Violence” you asked for.