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

gatsby-plugin-google-tagmanager-timeout

v2.2.5

Published

Gatsby plugin to add google tagmanager onto a site

Downloads

2,402

Readme

gatsby-plugin-google-tagmanager-timeout

Fork of gatsby-plugin-google-tagmanager that delays loading of GTM by placing it at the end of body and also delay the loading by given timeout. Please refer the example below.

Easily add Google Tagmanager to your Gatsby site.

Install

npm install --save gatsby-plugin-google-tagmanager-timeout

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-plugin-google-tagmanager-timeout",
    options: {
      id: "YOUR_GOOGLE_TAGMANAGER_ID",

      // Include GTM in development.
      // Defaults to false meaning GTM will only be loaded in production.
      includeInDevelopment: false,
      timeout: 2000, // default value is 1000ms
      // datalayer to be set before GTM is loaded
      // should be an object or a function that is executed in the browser
      // Defaults to null
      defaultDataLayer: { platform: "gatsby" },

      // Specify optional GTM environment details.
      gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_AUTH_STRING",
      gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_PREVIEW_NAME",
      dataLayerName: "YOUR_DATA_LAYER_NAME",
    },
  },
]

If you like to use data at runtime for your defaultDataLayer you can do that by defining it as a function.

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
      // datalayer to be set before GTM is loaded
      // should be a stringified object or object
      // Defaults to null
      defaultDataLayer: function() {
        return {
          pageType: window.pageType,
        }
      },
    },
  },
]

This plugin only initiates the tag manager container. If you want to use Google Analytics, please also add gatsby-plugin-google-analytics.

If you want to link analytics use with anything inside the container (for example, a cookie consent manager such as OneTrust), you will need to ensure that the tag manager script comes before the analytics script in your gatsby-config.js.

Tracking routes

This plugin will fire a new event called gatsby-route-change whenever a route is changed in your Gatsby application. To record this in Google Tag Manager, we will need to add a trigger to the desired tag to listen for the event:

  1. Visit the Google Tag Manager console and click on the workspace for your site.
  2. Navigate to the desired tag using the 'Tags' tab of the menu on the right hand side.
  3. Under "Triggering", click the pencil icon, then the "+" button to add a new trigger.
  4. In the "Choose a trigger" window, click on the "+" button again.
  5. Choose the trigger type by clicking the pencil button and clicking "Custom event". For event name, enter gatsby-route-change.

This tag will now catch every route change in Gatsby, and you can add Google tag services as you wish to it.

Note

Out of the box this plugin will simply load Google Tag Manager on the initial page/app load. It's up to you to fire tags based on changes in your app. See the above "Tracking routes" section for an example.