Cookie banner does not appear

[lymperis-e]

After following the installation instructions, both from the blog post and this repo, I was unable to get the plugin working. Specifically:

Gtag loads and sends analytics OK, but at no point does the consent banner appear.

I noticed the section where you mention the script tags in the blog post (shown below), but it is unclear to me: are these tags implemented in the plugin code, or should I put them in my application code manually?

<script
      key={`gatsby-plugin-google-gtag`}
      type="text/plain"
      data-category="analytics"
      src={`${origin}/gtag/js?id=${firstTrackingId}`}
    />,
    <script
      key={`gatsby-plugin-google-gtag-config`}
      type="text/plain"
      data-category="analytics"
      dangerouslySetInnerHTML={{ __html: renderHtml() }}
    />,

[astoiccoder]

Thanks for reaching out @lymperis-e .

The described script tags you are mentioning are indeed adjusted in the plugin code, which is the main reason why I had to fork the original gatsby-plugin-google-gtag plugin. Namely here. The post I put up in order to describe the way the plugin was developed. The important part here is that the scripts get the data-category attribute and that you have the analytics category in your consent config like so

exports.cookieConsentConfig = {
  categories: {
    necessary: {
      enabled: true, // this category is enabled by default
      readOnly: true, // this category cannot be disabled
    },
    analytics: {},  // <--- this needs to be here
  },
  language: {
...
  },
};

It is difficult to say why the plugin is not showing up. A first point to check could be that the plugin is added correctly to the gatsby-config.js. Mine looks like this

const { cookieConsentConfig } = require("./cookie-consent-config"); // at the top of the file
...

plugins: [
    {
      resolve: `gatsby-plugin-google-gtag-cookieconsent`,
      options: {
        cookieConsentConfig: cookieConsentConfig,
        googleGtagPluginConfig: {
          // You can add multiple tracking ids and a pageview event will be fired for all of them.
          trackingIds: [
            "GA_ID", // Google Analytics / GA
            // "AW-CONVERSION_ID", // Google Ads / Adwords / AW
            // "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
          ],
          // This object gets passed directly to the gtag config command
          // This config will be shared across all trackingIds
          gtagConfig: {
            optimize_id: "OPT_CONTAINER_ID",
            anonymize_ip: true,
            cookie_expires: 0,
          },
          // This object is used for configuration specific to this plugin
          pluginConfig: {
            // Puts tracking script in the head instead of the body
            head: false,
            // Setting this parameter is also optional
            respectDNT: true,
            // Avoids sending pageview hits from custom paths
            exclude: ["/preview/**"],
            // Defaults to https://www.googletagmanager.com
            origin: "https://www.googletagmanager.com",
          },
        },
      },
    },
    ...
 ]

And that you have the cookie-consent-config.js next to the gatsby-config.js file.

[astoiccoder]

After having a second thought, the issue is most likely related to this

export const isPluginDisabled = (pluginOptions) => {
    return !pluginOptions.enableForAllEnvironments && process.env.NODE_ENV !== `production` && process.env.NODE_ENV !== `test`
}

So without NODE_ENV==='production' (which I use for my production builds) the plugin won't work unless enableForAllEnvironments is set to true in the plugin options. This is probably not a good limitation and I should change the configuration to have a simple enabled flag that can then be configured in any way.

[astoiccoder]

Could be something like this https://github.com/astoiccoder/gatsby-plugin-google-gtag-cookieconsent/pull/4

[lymperis-e]

I had enableForAllEnvironments set to true. I just noticed that I had both this plugin and the original gatsby-plugin-google-gtag installed. I uninstalled the later, but then I got stuck at #2

[astoiccoder]

@lymperis-e thanks for being persistent on this matter. I was able to reproduce the issue in https://github.com/astoiccoder/gatsby-plugin-google-gtag-cookieconsent/issues/2 with a simple blog starter, which is fixed for now in 0.0.6.