Tip for Scheduling Holiday Javascript Functions using Google Tag Manager

FerrariSteve · December 2014

While tinkering with the SnowStorm plugin on my forums today, I got to thinking about how to schedule it so it automatically turns on and off when I want it to. For example, maybe you want it to only snow on your forum on Dec 25th and no other day. Or maybe you want it for the whole month of December. Maybe you want floaty hearts on your forum on Valentines Day. Whatever.

My solution was to use the Pockets plugin in combination with Google Tag Manager.

I was already using Pockets to install the GTM code after the head tag on every page (because I use GTM to load my Google Analytics tag). But once the GTM code is installed on your forum, you can tinker with scheduled (or unscheduled) javascript to your heart's delight.

To get the javascript on your server, you could:

choose to install the SnowStorm vanilla plugin and just not enable it
download and unzip the js files themselves into a new subdir under the plugins directory (which is what I did as snow_js)
or maybe even launch it from a CDN if you can find a hosted version somewhere that doesn't mind you stealing it

Anyway, once you have the URL of the code, create a new Custom HTML Tag type in GTM that contains:

<script type="text/javascript" src="http://www.example.com/forums/plugins/snow_js/snowstorm-min.js?v=1.1"></script>

(I add the versioning to the .js URL like Vanilla does, in case I want to edit the .js and avoid cache issues by incrementing it in GTM)

Set your GTM firing rules for the tag to "All pages," then Save, and Publish.

Test to make sure it works on your site as expected. Tinker with .js as necessary.

When you're happy, go back into GTM, edit the tag, and drop down the Advanced Settings. Select Enable custom tag firing schedule, pick your time zone, and your start and end dates.

Save and re-publish.

You can set a whole year's worth of holiday Javacsript fun on your forum without having to touch your site! Just go into GTM, set them for the year, and enjoy!

vrijvlinder · December 2014

I guess this is very cool... I would like to be able to change the snow out for other things during the year. Like leaves or pumpkins for halloween, and blood drops if they are into satanism, hearts for valentines day . Just build a whole assortment for the whole year and make it into a plugin I will certainly use it :þ

FerrariSteve · December 2014

There are lots of these types of Javascript overlays available for free out there. And while this isn't a technically a Vanilla "feature" per se, but I figured it's probably something that other forum admins might want to know about, and this approach does at least rely on a Vanilla plugin (unless you inject the GTM code into your forums some other way).

I've seen snowflakes, unicorns, etc. I'm sure you could find those blood drops, @vrijvlinder

I suppose someone could put them into a plugin, but then you'd be stuck with whatever ones are in there, and you'd have to write a separate scheduling system.

Bleistivt · December 2014

Another way to accomplish this is with smarty (if you want to integrate it into the template)

{$smarty.now|date_format:"%m"}

{if $smarty.now|date_format:"%m" == "12"}
...
{/if}

FerrariSteve · December 2014

nice, @Bleistivt‌. Smarty seems like a good approach.

I'll probably still stick with GTM, however, since it loads all javascript asynchronously, and helps with page load times.

But I do like Smarty's ability to "set it and forget it" for the same month's of the year, every year.

Tip for Scheduling Holiday Javascript Functions using Google Tag Manager

Comments