Eyes & Ears Entertainment http://www.eyesandearsentertainment.com A Topspin Certified Digital Marketing + Promotions Agency. We Focus On The Music Industry, Among Other Things. Mon, 31 Oct 2011 04:58:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How To Create a Topspin HTML Email For Media Widget http://www.eyesandearsentertainment.com/blog/how-to-create-a-topspin-html-email-for-media-widget/ http://www.eyesandearsentertainment.com/blog/how-to-create-a-topspin-html-email-for-media-widget/#comments Wed, 26 Oct 2011 08:14:11 +0000 Austin Mayer http://www.eyesandearsentertainment.com/?p=784 It’s no secret we love working with the Topspin platform. The range of tools the platform supplies is quite adept at handling pretty much any digital marketing requirement you can throw at it. After all, any good digital marketing theme would be remiss without a solid technical foundation.

Topping the list of the most accessible (and crucial) Topspin widgets is the Email For Media widget. In short, it enables fans to enter their email address and receive a piece of digital content all in a simple workflow. As great as this widget is (we use it in pretty much every campaign we run) it has a few shortcomings. Namely in the looks and cross platform / device rendering. And it’s in Flash.

In this post I’m going to show you how to take a stock Topspin E4M and turn it into a completely custom HTML5, jQuery powered beast that can render on anything from your desktop computer to your iPhone. Let’s get started!

Why use an HTML E4M?

  • You want complete control over the styling
  • You want the same look and feel across all platforms
  • Custom yet still interfaces with Topspin

The Code

The basic components that make up our HTML E4M:
1. HTML Form
2. jQuery.form.js
3. A little bit of Javascript

**Note that you still need to create an E4M in your Topspin account. You’ll need specific data to plug in to the form below.

Here is the HTML form. You’ll notice that we’re going to be passing some hidden inputs with this form, so if you want a more in depth understanding of them or would like to change or add inputs, head over to the Topspin E4M REST API documentation and check it out.

<form id="signup" action="http://app.topspin.net/api/v1/fan/create_fan" method="get" >
	<input id="email"  name="fan[email]" type="email" value="Enter Your Email Address" placeholder="Enter Your Email Address" class="erase" />
	<input id="submit" name="submit" type="submit" value="Get It Now"  />
	<input name="artist_id" value="YOUR ARTIST ID HERE" id="artist_id" type="hidden">
 
	<input name="fan[source_campaign]" value="YOUR CAMPAIGN ID URL HERE" id="source_campaign" type="hidden">
	<input name="fan[referring_url]" value="YOUR REFERRING URL HERE" id="referring_url" type="hidden">
	<input name="fan[confirmation_target]" value="http://www.topspindownloads.com/confirm/" id="confirmation_target" type="hidden">
</form>

Be sure to replace artist_id, fan[source_campaign] and fan[referring_url] with your own. You can grab all of this from the embed code that Topspin spits out when creating an Email For Media Widget. Find the CAMPAIGN ID URL by doing the following:

1. Find the widget_id=”" url in your embed code
2. Paste that into a browser
3. Find the url inside the <campaign> tag (ex. http://app.topspin.net/api/v1/artist/8081/campaign/10158210)

Next, include jQuery and the jQuery Form Plugin external script files and a short script to initialize the form when the page loads:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
 
    <script type="text/javascript">
    $(document).ready(function() {
	    $('input.erase').each(function() {
	  	    $(this)
		  	    .data('default', $(this).val())
			    .addClass('inactive')
			    .focus(function() {
				    $(this).removeClass('inactive');
				    if ($(this).val() == $(this).data('default') || '') {
					    $(this).val('');
				    }
			    })
			    .blur(function() {
				    var default_val = $(this).data('default');
				    if ($(this).val() == '') {
					    $(this).addClass('inactive');
					    $(this).val($(this).data('default'));
				    }
			    });
		    });
 
	    $('#signup').submit(function() {
		    $(this).ajaxSubmit();
		    $('#email').val('Thanks, Check Your Inbox!');
		    return false;
	    });
    });
    </script>
</head>
...

When the form is submitted the email will get posted to Topspin. If the server returns a success status then the user will see a “Thanks, Check Your Inbox!” message within the text input field given the use of the Javascript above.

That’s It

Feel free to use this code wherever you please. All that’s left to do is style it up with some CSS. Check out a few CSS3 form tutorials here.

In The Wild

www.theasteroidsgalaxytour.com

]]> http://www.eyesandearsentertainment.com/blog/how-to-create-a-topspin-html-email-for-media-widget/feed/ 0 Awareness vs. Data http://www.eyesandearsentertainment.com/blog/awareness-vs-data/ http://www.eyesandearsentertainment.com/blog/awareness-vs-data/#comments Wed, 31 Aug 2011 20:42:44 +0000 Brian Schopfel http://www.eyesandearsentertainment.com/?p=769 There is always the argument over which is better for an emerging artist: acquiring data or increasing awareness. Obviously, in some cases those go hand-in-hand, but for certain genres and artists, one outweighs the other for sure. After the jump is the splash page we designed for the Penguin Prison campaign. For those of you who don’t know, Penguin Prison is an emerging artist, (quickly!) gaining popularity, and is putting out his debut full-length on Downtown Records in October. Using jQuery we allowed fans to draw the Penguin Prison crest in order to reveal a remix of his new single ‘Fair Warning’ (Dirty Vegas remix). Under that, as a secondary call-to-action, fans could also enter their email address for a remix package of the track Multi-Millionaire. Read more below the image.

Penguin Prison jQuery Fancy Gesture

Now for this campaign, we opted to go the route of increasing awareness at the risk of acquiring a bit less data. Here’s why:

Genre – Penguin Prison’s tunes are in the pop/electronic/funk genre, and there have been a lot of remixes generated surrounding the original songs already released. Fans of this genre, for an emerging artists, typically will not enter their email addresses, and blogs will typically not post Email for Media widgets for a remix, of an emerging artist, unless the remixer is a real heavyweight. The market is clouded with horrible bands in this genre (Penguin Prison NOT being one of them), thus making the fan wary of providing an email address for content.

Breadth of Content - Lots of these remixes were available on his Soundcloud. Some were available on Facebook. Some were available on his website. You get the picture. We needed to streamline how fans got content when they were on the website, and there was a good chance they had already downloaded a lot of other content from a bunch of different points online. Entering an email address would be tedious, especially for remix content that they would probably be able to get somewhere else online within the next week or so.

Enjoyable Discovery – It would have been a completely different story if we just had hosted a download link that fans could click and download content, but we developed a way to increase and refine brand recognition (Penguin Prison crest of arms), and provide fans with content in a fun manner with a low barrier to entry. This makes fans more like to enter an email address after they’ve already spent that much time interacting with the artist and their content.

Had we run a ‘traditional’ Email for Media campaign, I project we would have acquired less emails than we ended up getting, simply from the points listed above.

That said, this campaign has provided great results, been a blast to work on, and Penguin Prison’s new record is going to fuck your day up (in a best way) when it comes out.

]]> http://www.eyesandearsentertainment.com/blog/awareness-vs-data/feed/ 0 E&E 3.0 http://www.eyesandearsentertainment.com/blog/ee-3-0/ http://www.eyesandearsentertainment.com/blog/ee-3-0/#comments Fri, 19 Aug 2011 21:57:30 +0000 Austin Mayer http://www.eyesandearsentertainment.com/?p=741

We have a new website!

After nearly year without so much as an update (sorry, we got busy!) E&E is proud to present the third iteration of our website!

E&E 3.0

Once again based around the kickass WordPress platform, the latest version of the E&E website finally showcases our work and makes it easy (we hope so at least) to figure out what it is that we do. What we’re most excited about is the project tagging system. Want to see what we did D2C Marketing for? Just click the D2C button in Our Work and watch as the different projects automagically reorder to only display the associated tag.

What we’ve been up to

So what have we been up to lately aside from not finishing our own website? Well quite a bit it turns out. The past year has seen us starting to work with some amazing clients in the music industry. Namely, designs for Paul McCartney, TV On The Radio, Lady Gaga, Marvin Gaye & full on D2C Digital Marketing for O.A.R., Pajama Club, The Asteroids Galaxy Tour & so much more. Make sure you check out Our Work to see everything we’ve been doing.

As many of you may (or may not) know, Brian and I started E&E a little under two years ago with the goal of providing reliable and awesome artist services for the music industry. Largely created to serve a creative marketing and music discovery need, we gradually ended up folding in creative design and development into our offerings. It’s pretty crazy to realize how far we’ve come as a company in such a short time. To think that a year and a half ago we had a handful of projects and were sitting at Brian’s kitchen table negotiating client contracts and taking conference calls in his living room.  We now have our own office space over in the Bucktown neighborhood of Chicago and have over 50 client projects on display right now! Wow.

We’d like to thank all of our clients thus far and everyone who has helped out along the way. Without you guys E&E would not be here today and we would not have a new kickass website to show you. We are super excited for what the future has in store and can’t wait to show you!

]]> http://www.eyesandearsentertainment.com/blog/ee-3-0/feed/ 0