halloween.js

Install guide · Google Tag Manager

Add Halloween effects to Google Tag Manager

If the site already runs Google Tag Manager, you can switch the effects on and off from a tag without touching the site code.

Steps

  1. In your container open Tags → New and choose Custom HTML as the tag type.

  2. Paste the snippet below into the HTML field.

  3. Set the trigger to All Pages, name the tag, and save.

  4. Preview the container, then Submit and publish the new version.

The snippet

One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone. 

<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
  function apply() {
    document.body.classList.add(
       "halloween",
       "halloween-screen-left-top",
       "halloween-screen-right-bottom",
       "halloween-eyes",
       "halloween-witches",
       "halloween-spider-drop",
       "halloween-tombstones"
    );
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();
</script>

Install once, then leave it. The effects switch on by themselves every year from 18 October to 2 November and stay off the rest of the time. There is nothing to remove afterwards. Installed earlier? You will see nothing until 18 October. That is expected, not a bug.

Check that it works

  1. Open your live site in a private window and reload without cache.

  2. Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.

Good to know

  • Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
  • Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
  • The effects sit in a fixed layer and never shift your page layout.
  • Pause the tag when the season ends if you want the effects off earlier than the built-in season window.
  • Nothing showing in season? See troubleshooting.