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.

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

In our continuing series of examining Google Search Trends to gain insights into the top keywords queried in the USA, we present our findings for April 2022. Every day, we capture the top three keyword phrases in terms of search volume as reported by Google Trends (US Only). Each term has an estimated query volume attached to it, which we also record. The number scale tops out at 10,000,000+ with a lower limit of 200,000+ (sometimes 100,000+). After the conclusion of the month, we look at the phrases we collected along with their volumes to get an understanding of what drove queries for the month. Top Trending Keywords - April 2022 Overview Last month, we only had one phrase that was queried over 10 million times, according to Google Trends. We’re not sure if “April Showers brings less Unified Search Interest” is the new hip saying but you’ve read it first, for sure.We did see queries across the typical topics: Entertainment, Holidays, Politics.  We’ll delve into all of those phrases.  Oh yeah, and a billionaire decided to buy a social network so we’ll examine the timeline of that topic. Finally, since there were so many and they were spread over five distinct subcategories, we are doing a deep dive into the keywords related to sports.  Those live events certainly capture the attention of Google users.   Climate Change Awareness In coordination with Earth Day, Google changed their logo with a Doodle that linked to search results for the following phrase: Climate Change - 4/21/2022 - 10,000,000+ queries SInce the inception of Google Trends, the search interest for this phrase has never been as high as it was last month. Google has used its Doodle program to bring attention to other topics in the past. We wonder if search interest in this topic will continue to increase in future months and years.   No One Was Slapped At The Grammys After we reported that Will Smith broke Google Trends in March 2022, the AMP team thought there may be a spike in interest in other awards shows. Check out the phrases attached to the Grammys: Grammys 2022 - 4/2/2022 - 2,000,000+ queries Olivia Rodrigo - 4/3/2022 - 2,000,000+ queries The awards show received a respectable number of queries and congrats to Olivia Rodrigo on her wins.  Let’s look at the historical data for this awards show: Looking at the past five years, the search interest in this year’s Grammys was a part of a downward trend.  There appears to be no effect from the Oscars.  We do like the small spike in the chart that is connected to when nominees are announced.   Top Movie Queries Last Month What films drove people to search in April 2022?  Here’s the list we collected: Doctor Strange 2 - 4/6/2022 - 200,000+ queries Sonic 2 - 4/7/2022 - 500,000+ queries Thor: Love and Thunder - 4/18/2022 - 1,000,000+ queries Don't Worry Darling - 4/27/2022 - 500,000+ queries The only phrase that is attached to a movie that premiered in theaters from this list is “Sonic 2”.  The rest are associated with a trailer that was made available online. If interest in a trailer is high, we feel that it’s a good indication that anticipation for the film is high.   Bonus query - the final episodes of the Netflix series Ozark were made available on the 29th: Ozark - 4/29/2022 - 500,000+ queries   Holidays And Natural Occurrences Interest in holidays is strong and we typically see the most popular holidays get queried on the day they occur or when the celebration starts.  Here are the phrases that we collected last month: Passover - 4/14/2022 - 200,000+ queries Happy Easter! - 4/17/2022 - 1,000,000+ queries Earth Day - 4/21/2022 - 1,000,000+ queries It’s clear that the Google Doodle related to climate change dwarfed the search interest in Earth Day.  In this five year view, the interest is in a bit of a down trend. The spike in the middle of the chart shows that search interest was at its highest in April 2020. Some people may not think it’s a great holiday but Tax Day in the US was on the 18th this year and here was the phrase associated with that day: TurboTax - 4/18/2022 - 1,000,000+ queries Procrastinators unite!  Or not. Or whenever you get to it. We saw that the full moon in April drove people to search and another weather related query made the daily top 3: Full moon April 2022 - 4/14/2022 - 200,000+ queries Severe thunderstorm warning - 4/11/2022 - 200,000+ queries Winter is officially over - we did not see any Winter Storm Warning queries in April!   Politics As Usual We had a few queries related to politics, both domestically and abroad, that made our collection from last month: Senator Dianne Feinstein - 4/14/2022 - 200,000+ queries Rudy Giuliani - 4/20/2022 - 500,000+ queries Madison Cawthorn - 4/22/2022 - 200,000+ queries French election - 4/23/2022 - 1,000,000+ queries Sen. Dianne Feinstein made the list because of news stories that she is no longer mentally fit for Congress.  Rudy Giuliani made an appearance on The Masked Singer TV show, which was spoiled back in February.  The North Carolina congressman made headlines on the 22nd and the presidential election in France captured enough attention of the US audience that it was queried over a million times on the 23rd.   Elon Musk  Not sure if you’ve heard but Elon Musk announced that he was going to buy Twitter and then had his offer accepted - all in the month of April 2022. Elon Musk - 4/4/2022 - 500,000+ queries Elon Musk - 4/25/2022 - 5,000,000+ queries At the time of this writing, the deal has not been finalized but all of AMP is watching closely to see what changes may come to this social media platform and its ads policies.   Just a Month About Sports Since people have been allowed to watch events in stadiums and arenas, sports-related searches are back with a vengeance. We did see a dip in the number of phrases that had sports intent between April 2020 through the summer of 2021.  Last month, we saw a good number of phrases that could be grouped to tell a few stories. Check out the timeline of the NCAA Basketball Tournaments: Final Four - 4/1/2022 - 1,000,000+ queries UConn women's basketball - 4/1/2022 - 500,000+ queries Duke - 4/2/2022 - 5,000,000+ queries Duke vs UNC - 4/2/2022 - 2,000,000+ queries UConn women's basketball - 4/3/2022 - 1,000,000+ queries NCAA basketball - 4/4/2022 - 5,000,000+ queries The Masters were back in a big way thanks to Tiger Woods and newcomer Scottie Scheffler.  See how people searched over six days in April: Tiger Woods - 4/5/2022 - 500,000+ queries Masters leaderboard - 4/6/2022 - 2,000,000+ queries Tiger Woods - 4/7/2022 - 1,000,000+ queries Scottie Scheffler - 4/8/2022 - 1,000,000+ queries Scottie Scheffler - 4/9/2022 - 2,000,000+ queries Scottie Scheffler - 4/10/2022 - 2,000,000+ queries Did you know European Football is popular in the US, at least from a search perspective? Check out this list of league and team names: Champions League - 4/5/2022 - 500,000+ queries Real Madrid - 4/6/2022 - 1,000,000+ queries Europa League - 4/7/2022 - 500,000+ queries Liverpool - 4/10/2022 - 500,000+ queries Read Madrid - 4/12/2022 - 1,000,000+ queries Man City - 4/13/2022 - 200,000+ queries Liverpool vs. Man United - 4/19/2022 - 500,000+ queries Liverpool - 4/24/2022 - 200,000+ queries Champions League - 4/26/2022 - 1,000,000+ queries Real Madrid - 4/26/2022 - 200,000+ queries Real Madrid - 4/30/2022 - 200,000+ queries NBA playoffs kicked off in April 2022 and the queries related to it rolled from the 13th through the 29th: Pelicans - 4/13/2022 - 500,000+ queries Hornets - 4/13/2022 - 500,000+ queries Clippers - 4/15/2022 - 500,000+ queries Hawks - 4/15/2022 - 500,000+ queries Warriors - 4/16/2022 - 1,000,000+ queries Timberwolves - 4/16/2022 - 500,000+ queries Bulls - 4/17/2022 - 500,000+ queries Suns - 4/17/2022 - 500,000+ queries Warriors - 4/18/2022 - 1,000,000+ queries Bulls - 4/20/2022 - 1,000,000+ queries 76ers - 4/20/2022 - 500,000+ queries Miami Heat - 4/22/2022 - 200,000+ queries Celtics - 4/23/2022 - 2,000,000+ queries Bulls - 4/23/2022 - 500,000+ queries Pelicans - 4/24/2022 - 500,000+ queries Jimmy Butler - 4/24/2022 - 200,000+ queries Celtics - 4/25/2022 - 2,000,000+ queries Warriors - 4/27/2022 - 1,000,000+ queries Joel Embiid - 4/28/2022 - 1,000,000+ queries Memphis Grizzlies - 4/29/2022 - 1,000,000+ queries Lastly, American Gridiron Football made some appearances in the daily top 3. The first phrase being a new league and the NFL draft. USFL - 4/16/2022 - 1,000,000+ queries NFL Draft - 4/27/2022 - 5,000,000+ queries 2022 NFL Draft - 4/28/2022 - 2,000,000+ queries Phew - that was a lot but each subsection had its own little journey.  You could see how the NBA playoffs are unfolding by just reading through the top queries.  Go Celtics! Thanks for reading. If you liked this article, we utilize search trends data for all of our clients and we invite you to learn more about our SEO services. Until next month.

“If you look for it, I’ve got a sneaky feeling you’ll find that social actually is all around.”  Okay yes, I did steal that line from one of my favorite Holiday movies, Love Actually. But it’s true– elements of social networking are integrated into many of the products we consume every day, even if it’s not as overt as platforms like Facebook or Twitter.  Take Venmo for example. You open up the app to pay your roommate for your share of utilities and catch yourself scrolling through a feed of your friends’ recent transactions, decoding emojis to figure out what they’ve been up to. At its core, this is social networking, and it’s a feature of Venmo’s payment platform that has set it apart from its competitors like Zelle.   By adding a social component to something like a payment platform, Venmo created a space for not just payments to be exchanged, but social interactions. As humans, we intrinsically crave these connections and interactions that remind us we’re not alone. Leveraging this insight has put Venmo at a competitive advantage, as with many other brands who have taken the opportunity to create a social experience around their product. Why? Because nothing can compete with the power of a strong community around a product.    Case Studies: Products with Social Components & Where Brands Can Lean In There is a range of products with social components baked in. Some were created with social at the forefront, while others added social components as a feature to an existing product. Some have opportunities for external brands to join the conversation and leverage their niche communities, while others are a closed community of consumers. We’ll dive into two case studies to show the ways this has played out for two popular brands: Strava and Spotify.    Strava  Strava calls itself a social fitness network. The app allows users to track their activities and offers a range of analysis tools, from miles ran to calories burned and so on. But they didn’t stop there– Strava integrated a social experience into the commonly found fitness tracking app by allowing users to post their workouts to a feed, follow friends, and comment to give “kudos” (likes) to other users’ workouts.  Similar to other social platforms, users find themselves following IRL friends and acquaintances, but also their idols and professional athletes to get a glimpse into their training. The app allows users to join clubs, such as a running club or group of members training for the event, and invites them to take part in challenges such as “complete a 5K in May” or “log 250 minutes of activity”.  Brand Involvement  Clubs and challenges are the best way for brands to get involved in the conversation on Strava. A brand can create a club like Brooks Run Club or Nuun Hydration to connect athletes who identify with these brands to each other. Another option is for brands to host a challenge such as Lululemon’s Move and Stay Connected challenge, which was created during the height of the pandemic in 2020.    Spotify  Spotify serves a very straightforward purpose to consumers– to access music and podcasts. With that said, they have done a great job at weaving in social components that feel additive to the experience of using the app.  When you sign up for Spotify, you create a profile with your name and a profile photo. You’re prompted to connect your account to Facebook, and recommended users you may know and artists you may like to follow. Once you’re following other users, you can check your “friend activity” on the desktop app, view their profiles and save their playlists, and even create co-authored playlists with other users.  In addition to these social components within the app experience itself, Spotify has mastered the art of integrating with other social networks and encouraging users to share the music and podcasts they’re listening to on those external platforms. For instance, the notorious Spotify Wrapped campaign is practically designed for sharing on Instagram Stories. But even on a normal day, the regular social sharing integration in the Spotify app that allows users to share what they’re listening to on social is seamless.  Brand Involvement  There are a handful of ways that brands can get involved in the conversation on Spotify. Perhaps one of the most fun and creative ways is to create a brand profile with curated playlists like McDonald's and Gymshark have successfully done. Brands may also buy a variety of ad placements in the Spotify app, including audio and video ads served to listeners who use the free version of the app, and also podcast ads.    Below are a couple of questions to ask when thinking about how you can apply this to your brand or product:   Can a social component be added to my product in a way that adds value to the overall experience?  A social component needs to build upon your existing product, and it needs to feel natural as if the purpose of the product supports the need for a social component and the experience is additive to the product.  There should also be a clear reason to create a space for consumer-to-consumer interactions. For example, perhaps you can see that these engagements are already happening on another social platform, like a Facebook Group or a Reddit thread.    Can my brand join the conversation or have a presence in a social component of an existing product, like Spotify or Strava?  If there’s a social component of a product that feels like a perfect fit for your brand, there may be an opportunity to establish a presence in that community. However, it’s important to approach these opportunities thoughtfully and strategically, because you will be under the microscope of a niche community. Additionally, you need to be careful that you’re joining a conversation where brands are welcome. For instance, communities like Reddit exist for user-to-user interactions, and brands can be shunned away from the platform.     With this all in mind, my hope is that next time you’re deciding which social platforms to leverage for an upcoming project or campaign, you may think outside the box about social media and look at the non-traditional, yet intrinsically social, platforms at your disposal. 

A buzzing topic in the world of data security and protection is the upcoming Google Chrome changes. That’s right, we will soon be living in a cookieless world. Technology solutions in the current landscape are optimizing their efforts much before the implementation as they’d like to get well-acquinated with what the future of advertising may look like.   “We want to be early adopters and hand-raisers as a part of these cookieless and new ID solutions,” said Meghan Galligan, Stop & Shop’s director of digital marketing. (Source: AdExchanger) AMP Agency partnered with Stop & Shop and Dstillery to learn more about how to navigate through an ever-changing cookieless landscape.   Read the news here.