Our Marketing Blog

Our industry is ever-changing. Get insights and perspective from our experts as we share our knowledge and experience on how to successfully navigate the marketing landscape.

Building Cheerify.it

Cheerify.it started with a simple idea: What would a website look like if you could decorate it with Christmas lights and sync it music. We've been wanting to play with using browser bookmarks to manipulate the contents of a website, so we extended the original idea to be able to "Cheerify" any website.

Taking over a website via browser bookmarks is not a new idea. Because javascript runs on the client side, there is a lot of potential for automation of redundant tasks. We wanted to create something less useful but more fun. Something along the lines of the Doge bookmark, YAAARRRify bookmark and Harlem Shake bookmark but just a little more ridiculous.

Building The Prototype

We had seen bookmarks manipulate elements on screen to music before. The tricky part was going to be building a framework that allowed us to easily sync animations to music.

First, I want to give a huge shout out to Moovweb for their Harlem Shake bookmarklet. Not only did it serve as a source of inspiration but it gave me a great place to start building out my framework. The original Harlem Shake bookmarklet works by inserting an HTML5 audio element into the page and using a setTimeout to wait 15 seconds before making everything on the screen go crazy. They've since updated their code on GitHub to a more reliable method, but I'll get to that in a second.

So using the Harlem Shake code as a starting point, we built a framework for adding effects to a timeline. Our framework uses a setInterval() to check the HTML5 audio's currentTime property every 10th of a second. We then iterate through an array of effects to trigger as we approach each timestamp. The array is made up of smaller arrays that include a timestamp and a function to call. Using anonymous functions within our effects array kept our code readable and made it easy for other developers to help orchestrate.

It's important to note I could have also used the timeupdate event of the audio element instead of set interval; however, setInterval allowed us to control our proprietary frame rate.

HTML5/CSS3

As browsers become smarter, we can do cooler things with them. In this case, we used Cheerify.it as an excuse to play with some of the more cutting edge features of modern browsers like CSS3 animations and HTML5 audio.

HTML5 Audio

Html5 Audio has come a long way. For this experience, we didn't worry about creating fallbacks for older browsers like we normally would. We've used MediaElements.js on several websites in the past with great success. This time around we kept it simple using only two source files, MP3 and OGG. We then took advantage of the audio element's methods and properties to keep the animations in sync with the music as well as create a little music player that allows users to play/pause and mute the whole experience.

CSS3

The real fun was coming up with CSS3 animations. Every animation was made using pure CSS3, even the dancing snowman. Only thing we could have done better with the snowman is used the animation-delay property instead of setTimeout() to trigger different parts of the animation. Both work, just in the future, CSS over javascript.

Vanilla Javascript

When it came time to writing the javascript that made the magic happen, we decided early on we would build it without jQuery. We mainly did this because we didn't need it. It was also an opportunity to brush up on our DOM manipulation-fu while exploring some of the lesser used ways of selecting elements.

To make things easier while we animated, we created a javascript object of arrays of elements that could be manipulated. We started by grabbing all of the elements on screen, document.getElementsByTagName("*"). We then looped through all of the elements and added them to our object of arrays based on:

  • How big they were
  • Where they were located
  • Whether they were hidden or not
  • Whether they were within the viewport or not
Then, we created a function for adding effects to elements. This function would add a class to an element and remove it after a set amount of time. This is how we animate all of the things.

Creating An Easier Way To Share The Experience

All of our early prototypes were executed using the browser bookmark. This made things easy because all I had to do was insert my javascript file before the closing body tag and the whole experience would start. We all agreed however that browser bookmarks are not as intuitive as we needed the experience to be.

Our solve for this was to allow people to Cheerify their site by typing a URL into an input box and then pressing "Cheerify It".

To accomplish this we used PHP to test if we had a site to cheerify. After grabbing and cleaning up the URL, we used CURL to get the contents of the web page. This is where it got a bit mucky. We assumed that the destination site had well-formed HTML and attempted to insert our cheerify script before the closing body tag. Believe it or not, there are sites out there that have more than one body tag and others with no body tag at all.

So, now we had a URL that looked something like http://www.cheerify.it/?site=https://www.ampagency.com with all of the contents of that page grabbed, manipulated and ready to output to the browser. We then echoed out our manipulated HTML and hoped all was well. It wasn't, yet.

Using this method, we made several assumptions about how the HTML was formatted. We also had broken paths to all assets using relative URLs. To fix this, we did a very primitive preg_replace to replace all relative paths with absolute ones. This fixed relative URLs in the HTML but not relative URLs lazy loaded with javascript.

This was probably the hackiest part of the whole project. To fix broken sites that add content with javascript, we did another search and replaced on all paths after the DOM was fully loaded and all javascript had been executed. I then overwrote the javascript alert() function to silently output to the console to avoid any other interruptions.

Going Live

One of my favorite development automation tools is Grunt. It played a huge part in automating the staging, minification, auto-prefixing and de-linting of the code during the development process. I've included a modified version of the Gruntfile.js we used in the Cheerify.it GitHub repo.

Wrap Up

The Cheerify site was a lot of fun to work on and and the team did a great job turning the whole project around in a short time frame. Check out the Cheerify.it Source Code on Github and leave a comment below with your thoughts.

Finally, don't forget to Cheerify this page.

Related Posts

AMPlifier - Social Media Industry Update - Week of April 5, 2021

Welcome to the AMPlifier – a spotlight on the latest and greatest industry updates. Whether you want to learn more about this week’s marketing trends, the newest updates to your favorite social media platforms, or simply what meme is currently taking the internet by storm, then read on. You never know what you might learn. LINKEDIN IS ALSO DEVELOPING AUDIO ROOMS, TAPPING INTO THE AUDIO SOCIAL TREND Given the rising popularity of Clubhouse and audio-based social interaction, and its capacity for connecting professionals around niche, industry discussions, it will likely come as no surprise to find out that LinkedIn is also developing its own audio rooms product to tap into the trend. Read More INSTAGRAM OFFICIALLY LAUNCHES TIKTOK-LIKE REMIX OPTION FOR REELS After it was recently spotted in testing, Instagram has now officially launched its new Remix option for Reels, which enables Reels creators to add their own take to eligible Reels clips, which can help fuel content trends. Read More   TIKTOK LAUNCHES NEW 'PLAYLISTS' FEATURE TO GROUP CLIPS INTO THEMED COLLECTIONS This could be a great way to boost engagement with your content on TikTok. Late last week, TikTok began rolling out a new 'Playlists' feature with selected creators, which enables users to group their TikTok clips into themed collections. Read More   That’s a wrap on this week’s feed. Stay tuned to see what happens next.

What Women Want from Brands, Advertising, and Marketing in 2021

This Women’s History Month, AMP explored what women today want from brands, advertisers, and marketers. Since there are approximately 3.9 billion women in the world — each with their own unique personalities, backgrounds, and desires — we’ve narrowed the focus of this article to three desires that stood out to us during our research. We’ve also included insights from women we interviewed who have worked in the advertising and marketing industry. (Their names have been removed for privacy.) We don’t claim to speak on behalf of all women, but instead aim to highlight some of the desires and expectations for brands & the industry that many women have expressed in recent years. Women Want More Diverse and Intersectional Representation Over the past decade, there have been some incredible pushes towards more diverse representation of women in advertising — from The National Lottery’s uplifting & inclusive “This Girl Can” campaign to this amazing photo of Black transqueer lesbian model Jari Jones popping open a bottle of champagne in front of her larger-than-life Calvin Klein ad. Most of the women we spoke to in the industry mentioned that they’ve seen more diverse representation in recent years: more interracial couples, more body sizes in the fashion world, more stay-at-home dads, and fewer blatantly sexist ads. Still, only 29% of American women believe they are accurately represented in advertising, according to a recent study by data intelligence company Morning Consult. (The same study found that 44% of American men believe women are accurately represented.) As advertisers and marketers, a crucial step in developing a strategy plan is studying our consumers and learning about their wants, needs, and habits. So why does the industry continue to miss the mark with female representation? Perhaps it has something to do with the word “and.” Because a consumer is never just a woman. Maybe she’s a woman and bisexual and Latinx and a stepmom and really into Maseratis and perfume. When we look at female representation, we must consider intersectionality and what other identities might matter to female consumers. Let’s say our consumer identifies as a lesbian. According to a 2019 survey of 2,000 adults in the UK by GAY TIMES and Karmarama, 72% of LGBTQ respondents think the way they’re represented in advertising is tokenistic.  Let’s say she has a disability. The Calgary Society for Persons with Disabilities (CSPD) reported in 2019 that only 3% of characters on North American television have disabilities and of these, 95% are played by able-bodied actors. (This statistic inspired their moving “Visibility for Disability” campaign.) Let’s say she’s a mom. A 2019 report from the brand Motherly with almost 6,500 survey respondents found that 85% of millennial moms don’t feel like society does a good job of understanding and supporting them. Let’s say she’s a woman of color. A 2019 study on the representation of Black women and girls in Hollywood found that Black females and other females of color are more likely to be portrayed partially/fully nude than white females — in films and on TV. The same study found that white female TV characters are more likely to have a job (89.6%) compared to Black female characters (70.5%) and other female characters of color (58.8%). (This study was conducted by The Geena Davis Institute on Gender in Media and focused on family films and TV.) How might it feel to see characters who look like her repeatedly oversexualized and underemployed? Even if a woman feels her “womanness” — or whatever you want to call it — is well-represented, maybe she doesn’t feel like her other identities are well-represented. Maybe the commercials, print ads, and radio spots she encounters are not adding up to how she sees herself as a whole woman person.   Women Don’t Want to Be Superheroes (At Least Not All the Time) The brilliant author Carmen Maria Machado wrote, “We deserve to have our wrongdoing represented as much as our heroism, because when we refuse wrongdoing as a possibility for a group of people, we refuse their humanity.” Our messy complexities are part of what make us human. And it turns out, a lot of women want to see more of this messiness, and less of the fully put together superwoman archetype we’ve been served again and again in past decades. One ad that leans into this attitude superbly is Frida Mom’s “Stream of Lactation” commercial, which highlights the highs and lows of breastfeeding with an authentic, stream-of-conscious voiceover. One woman in the industry we interviewed said: I LOVE the new Frida commercial about breastfeeding. While watching the commercial, I felt seen and understood. I saw myself and thought "Wow, that's exactly what I do" or "Yes, that happened to me." Women want to see other women that they identify with, and that's the best (and most ethical) way to sell your product. For years, women were served razor ads featuring models with shaved skin and pad ads featuring that notorious blue liquid. Marketers made shaving and menstruation seem like a walk in the park. But then came “Blood Normal” and Billie. “Blood Normal” by hygiene company Libresse broke ground as the first campaign to show actual period blood. Billie similarly changed the game by creating the first razor campaign for women featuring actual body hair. And people loved it. “Blood Normal” won the coveted Glass Lion for Change Grand Prix at Cannes and Billie has grown to be a successful brand with 278k followers on Instagram. By portraying women in nontraditional but relatable ways, brands like Libresse and Billie have managed to both diversify female representation and gain a loyal following of customers.   Women Want Brands to Play a Role In the Conversation on Social Issues and Gender In the era of social media, brand accountability, and virtual boycotts, we are seeing more women putting pressure on brands to speak up on social issues. When the Black Lives Matter protests surged in spring 2020, numerous brands spoke out on the topic of racial justice. But for many internet users, these efforts — many of which took the form of social media posts — didn’t go far enough. Examples of real comments posted on one popular fashion brand’s 2020 posts: “If you just posted a square, you’re performative!” “What steps have you implemented to date?” “So this was a lie.” “I’m so sad to hear all this and will no longer support [brand name]. I’ve been a diehard fan for so long. I will never stand for a brand that would allow, at any capacity, racial profiling.” This brand has over 4 million followers on Instagram. And it’s just one of many brands we saw called out in 2020 for their social media responses to current events. We’re also hearing women say they want brands to contribute more directly to the conversation on gender. A women who works in the industry told us: I want to see more men wondering what detergent to use and more women thinking about what kind of cool car to drive. In my own relationship, my husband is very concerned about dishwasher liquid (really) and I want to drive a slick fast car on an open road. Life is changing, roles are changing, and all I'm asking is to see that reflected. Big brands especially have so much power to normalize and destigmatize. Another important step in joining this conversation is amplifying female voices at brands and agencies. It’s not just about hiring more women, but also promoting them to management and leadership positions. When The 3% Movement was founded in 2012, only 3% of all US Creative Directors were women. The organization has since helped push that number to 29% today — an amazing increase, but still not close to 50%. Promoting women to leadership positions adds diverse perspectives to our teams and brings more female insights into how women want to be represented.   How To Give Women What They Want There are so many ways organizations can tailor their branding, advertising, and marketing efforts to better address the desires and expectations of women. They can engage with the conversation on social issues and gender, complexify female roles in their campaigns, and offer more diverse and intersectional representations of women across the board. They can also enrich their internal teams by hiring women, and promoting them to leadership roles. The goal isn’t for every brand to try and address all the desires of every woman on the planet, but to make efforts day by day where you can. For example, if parents make up a large percentage of your target audience, you might consider how to bring intersectional, complex representations of moms to your ads. Think of where it makes sense to engage authentically with your customers. Insights from Women Who Work in the Industry To get a better idea of how the marketing and advertising industry is currently addressing female wants and expectations from the inside, we interviewed some of the women we know. The responses below come from people who have worked as interns, freelancers, and full-timers — at agencies and in-house — with experience ranging from 3-10+ years in the industry. Q: What do you want from the ads and marketing tactics you see in the world? A: “I would like to see more representation throughout ad campaigns. It would be nice to see people who look like me and the people around me, and not just the same famous people.” “I've seen companies attempt to be more socially aware (or "woke," if you will) but sometimes it backfires. I want advertisers to stop trying so hard in their marketing tactics or do a better job of reading the room.” “I always respond to authenticity, self-awareness and especially humor — the Ok Cupid "DTF” campaign is a great example. As a consumer, I do not respond well to feeling shamed or condescended to.” “I want to see all types of women doing all types of things. I also would love for brands to call out censorship, double-standards, or gender roadblocks in their ads directly.”   Q: What are your expectations for the campaigns you yourself put out in the world?   A: “To cast women in unexpected roles. Conversely, to not only show moms as caretakers and nurturers.” “I do my best to make people think about the thing we're advertising in a new way, whether that means showing them a way our product can add something new and positive to their lives, or just causing them to stop and laugh at an interesting image or headline. I also feel a pretty heavy responsibility not to add to any of the toxic stereotypes or standards that we're all — but especially women — constantly bombarded with.” “What an incredible responsibility we play as women in the biz. It's frustrating to see the same narrative about the same woman over and over. And it's a true challenge to bend that narrative into one that's more truthful of our experiences. But it's a fight worth fighting, and I think having women in leadership roles in advertising is greatly improving this issue.”   Q: How are women portrayed in advertising? Do you predict this changing in the upcoming year?   A: “Over the past ten or twenty years, we've gone from a total proliferation of the same cookie-cutter image to the slow, incremental appearance of more diverse, ‘real’ images of women. As we've seen more and more brands jump on that bandwagon, I can't help but feel a little cynical. Pop feminism and ‘girl power’ have become just another sales tool... it's still so much about making women feel like they need things to be fully realized. It's just gone from, ‘Buy this product and you'll be beautiful’ to, ‘Buy this product and you'll be empowered.’” “My wife and I have both been hyper-aware of the significant increase of interracial couples featured in ads, which is very exciting. For 2021, I'd love to see more of this, and a lot more queer women of all races, ages, body shapes, and ethnicities. I have seen lesbian couples here and there, but I haven't seen many lesbian parents.” “I think there's still an absence of women who are 40+ in the advertising I see. Middle age isn't what it used to be and it would be great to see the modern, mature woman portrayed more in advertising that is not related to medications.” “One thing I hope would change is the Instagram fad of everyone looking like a Kardashian. Influencers are such a huge part of advertising, and we know how harmful those unrealistic depictions of beauty can be.” “For the most part women have been either hyper-sexualized or seen as arm-candy to sell a product. There are more conversations and actions happening in recent years to represent women in less hyper-sexualized roles. On the other hand, I do not have a problem with women being portrayed sexually. Especially in fashion and art. I think there has to be care in not being over-sexualized, where the woman then becomes an object of desire.”   Q: Do you feel satisfied with how you see women represented in advertising today?   A: “Satisfied would sound like there is not room for improvement. I think it’s much better than it was 10 years ago and hope it keeps evolving.” “One thing that bothers me about the way Black women are represented in advertising today is that there is still a bias toward light-skinned Black women or women who look mixed race. Obviously this is an old issue, but it still persists and needs to change.” “I think so… It is encouraging to see women of all shapes, sizes, ages, colors, and identities in ads these days… depicted as funny, strong, silly, beautiful, smart, and all of the ways you can be depicted. However, I do think we still need to come up with more ways to flip the script.” “I don’t know if I’m satisfied with how women are represented in advertising yet. I think having more women in advertising and higher positions would change the outcome of some campaigns. There can’t be representation properly done without real women’s voices.” Q: How does it feel to be a woman working in this industry? A: “I’ve been fortunate to work in an environment where I haven’t felt treated differently for being a woman.” “A lot of days I don't think about it too much, but it probably informs everything I do.” “There’s always room for improvement. There's no better time to be a woman in history than today, and hopefully thirty years down the line, a woman will say the same thing. We should always be striving for better.”

Celebrate Holi with AMP Agency

Each spring, people all over the world celebrate Holi. Known as “the festival of colors,” this ancient Hindu festival signifies the triumph of good over evil. A popular Holi tradition is the throwing of gulal (colorful powder) at friends, family, and even strangers. We sent our AMPers gulal so we could share the joy of Holi together — even while we’re far apart. Check out the video!   Happy Holi, everyone!