npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

liltag

v1.0.0

Published

LilTag is a simple and flexible JavaScript tag management system designed for developers, allowing dynamic loading of scripts based on specific triggers.

Downloads

9

Readme

LilTag

LilTag is a simple JavaScript tag management system that dynamically loads and runs scripts on your website based on the rules you set. With just 250 lines of code, LilTag uses a simple JSON file to store tags, operates without cookies, and doesn’t track users, ensuring your website remains fully GDPR compliant.

Features

  • Dynamic Script Injection: Load scripts dynamically based on various triggers.
  • Customizable Loading: Control where the content gets injected into the DOM (head, body top, or body bottom).
  • Event-Based Triggers: Supports triggers such as page load, DOM ready, custom events, and more.
  • Caching: Optional caching with customizable TTL (time-to-live) for the configurations.

Installation

Include LilTag in your project:

Example of Including LilTag (Deferred Loading)

<script src="//deeravenger.github.io/liltag/dist/liltag.min.js" defer></script>
<script>
  const lilTag = new LilTag("path_or_url/to/liltag_config.json");
  lilTag.init();
</script>

Example of Including LilTag (Asynchronous Loading)

If you want to load LilTag asynchronously and initialize it only after the script has fully loaded, you can use the following approach:

<script>
  (function () {
    const script = document.createElement("script");
    script.src = "//deeravenger.github.io/liltag/dist/liltag.min.js";
    script.async = true;
    script.onload = function () {
      const lilTag = new LilTag("path_or_url/to/liltag_config.json");
      lilTag.init();
    };
    document.head.appendChild(script);
  })();
</script>

Usage

Loading Configuration

1. Loading Configuration from a URL

You can initialize LilTag by providing a URL to a JSON configuration file. The configuration file should contain the tags you want to inject into your web page.

const lilTag = new LilTag("path_or_url/to/liltag_config.json");
lilTag.init();
JSON Configuration Example
{
  "tags": [
    {
      "id": "analytics",
      "trigger": "pageLoad",
      "content": "<script type=\"text/javascript\">console.log('Analytics script loaded.');</script>",
      "location": "head"
    }
  ]
}

2. Providing the Configuration Directly

If you prefer to provide the configuration directly within your code, you can pass it as an object.

const lilTag = new LilTag({
  "tags": [
    {
      "id": "analytics",
      "trigger": "pageLoad",
      "content": "<script type=\"text/javascript\">console.log('Analytics script loaded.');</script>",
      "location": "head"
    }
  ]
});
lilTag.init();

Enabling Caching

You can enable caching to avoid fetching the configuration on every page load. The enableCache() method allows you to specify a TTL (time-to-live) in seconds.

// Enable caching with a TTL of 2 hours (7200 seconds)
const lilTag = new LilTag('path_or_url/to/liltag_config.json');
lilTag.enableCache(7200);
lilTag.init();

Configuration Options

Each tag in the configuration file or object should have the following properties:

  • id: A unique identifier for the tag.
  • trigger: The event that triggers the tag. Options are:
    • "pageLoad": Triggered when the page loads.
    • "domReady": Triggered when the DOM is fully loaded and parsed.
    • "timeDelay": Triggered after a specified delay once the page has loaded.
    • "elementVisible": Triggered when a specified element becomes visible in the viewport.
    • "customEvent": Triggered when a custom event is fired.
  • content: The full HTML content to inject, including script and noscript tags.
  • location: Where to inject the script or execute the code. Options are:
    • "head": Injects the script or code into the of the document.
    • "bodyTop": Injects the script or code at the top of the .
    • "bodyBottom": Injects the script or code at the bottom of the .
  • delay: (Optional) Used with the "timeDelay" trigger to specify the delay in milliseconds before the script or code is executed.
  • selector: (Optional) A CSS selector for the element to observe. Required for the "elementVisible" trigger.
  • eventName: (Optional) The name of the custom event to listen for. Required for the "customEvent" trigger.

Contributing

Contributions are welcome! Please submit a pull request or create an issue to discuss your ideas or report bugs.