Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-dynatrace

Easily add Dynatrace RUM to your Gatsby site.

By default Dynatrace will only report load actions and ignore navigation inside the page as it relies on detection of XHR requests to determine significant actions. In order to provide some insight into user behaviour in Gatsby this plugin uses the Dynatrace JavaScript API to report custom user actions to Dynatrace whenever the user navigates between pages.

NOTE: This plugin only works in production mode! To test the injections and firing of events correctly run: gatsby build && gatsby serve

Install

npm install --save @mangoart/gatsby-plugin-dynatrace

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@mangoart/gatsby-plugin-dynatrace`,
      options: {
        // include the Dynatrace JS Agent & enable tracking
        enabled: true,
        // your tenant id - part of the url e.g. https://YOUR_TENANT_ID.live.dynatrace.com 
        tenantId: `YOUR_TENANT_ID`, 
        // the id of the application where the user actions should be tracked. Usually this will
        // be the ID of a manually created "Agentless real user monitoring" application
        applicationId: `YOUR_APPLICATION_ID`,  
        // Dynatrace API Token, can be retrieve from Settings => Integration => Dynatrace API
        apiToken: `YOUR_API_TOKEN`,
        /*
         * How the JavaScript Agent should be embedded into the page
         * Available Modes:
         *  0 - One Agent JavaScript Tag => NOTE: Do NOT use, does not work currently
         *  1 - Asynchronous Code Snippet (~18KB)
         *  2 - Synchronous Code Snippet (~18KB)
         *  3 - Whole agent code inline (~120KB)
         */
        mode: 1
      },
    },
  ],
}

JS Agent Updates & Configuration changes

The plugin fetches the JavaScript agent code & configuration directly from the Dynatrace API. Triggering a rebuild after configuration changes/JS agent updates should include the newest version in your Gatsby page.

Known limitations

© 2024 Gatsby, Inc.