Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Uli committed Oct 10, 2023
1 parent 95ab696 commit 8246479
Show file tree
Hide file tree
Showing 13 changed files with 19,506 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": [["babel-preset-gatsby-package", { "browser": true }]]
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/*.js
node_modules
34 changes: 34 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
*.un~
yarn.lock
src
flow-typed
coverage
decls
examples
736 changes: 736 additions & 0 deletions CHANGELOG.md

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions README.gtag.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
# gatsby-plugin-google-gtag

Easily add Google Global Site Tag to your Gatsby site.

> The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, Campaign Manager, Display & Video 360, and Search Ads 360.
Global site tag (gtag.js) is meant to combine multiple Google tagging systems and can replace older ones such as [analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) ([gatsby-plugin-google-analytics](https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/)).

For more general information on gtag you can read Google's official documentation on the subject: https://developers.google.com/gtagjs/.

If you're migrating from analytics.js (gatsby-plugin-google-analytics) you can read about the subtle API differences in more depth at: https://developers.google.com/analytics/devguides/migration/ua/analyticsjs-to-gtagjs.

**Please note:** This plugin only works in production mode! To test that your Global Site Tag is installed and firing events correctly run: `gatsby build && gatsby serve.`

## Install

```shell
npm install gatsby-plugin-google-gtag
```

## How to use

The `trackingIds` option is **required** for this plugin to work correctly.

```js:title=gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
// You can add multiple tracking ids and a pageview event will be fired for all of them.
trackingIds: [
"GA-TRACKING_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/**", "/do-not-track/me/too/"],
// Defaults to https://www.googletagmanager.com
origin: "YOUR_SELF_HOSTED_ORIGIN",
// Delays processing pageview events on route update (in milliseconds)
delayOnRouteUpdate: 0,
},
},
},
],
}
```

### `gtagConfig.anonymize_ip` option

Some countries (such as Germany) require you to use the
[\_anonymizeIP](https://support.google.com/analytics/answer/2763052) function for
Google Site Tag. Otherwise you are not allowed to use it. The option adds the
block of code below:

```js
function gaOptout() {
;(document.cookie =
disableStr + "=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/"),
(window[disableStr] = !0)
}

var gaProperty = "UA-XXXXXXXX-X",
disableStr = "ga-disable-" + gaProperty
document.cookie.indexOf(disableStr + "=true") > -1 && (window[disableStr] = !0)
```

If your visitors should be able to set an Opt-Out-Cookie (No future tracking)
you can set a link e.g. in your imprint as follows:

`<a href="javascript:gaOptout();">Deactivate Google Tracking</a>`

### `gtagConfig.optimize_id` option

If you need to use Google Optimize for A/B testing, you can add this optional Optimize container id to allow Google Optimize to load the correct test parameters for your site.

### Other `gtagConfig` options

The `gtagConfig` is passed directly to the gtag config command, so you can specify everything it supports, e.g. `gtagConfig.cookie_name`, `gtagConfig.sample_rate`. If you're migrating from the analytics.js plugin, this means that all Create Only Fields should be snake_cased.

### `pluginConfig.respectDNT` option

If you enable this optional option, Google Global Site Tag will not be loaded at all for visitors that have "Do Not Track" enabled. While using Google Global Site Tag does not necessarily constitute Tracking, you might still want to do this to cater to more privacy oriented users.

### `pluginConfig.exclude` option

If you need to exclude any path from the tracking system, you can add it (one or more) to this optional array as glob expressions.

### `pluginConfig.delayOnRouteUpdate` option

If you need to delay processing pageview events on route update (e.g. to wait for page transitions with [`gatsby-plugin-transition-link`](https://www.gatsbyjs.com/plugins/gatsby-plugin-transition-link/)), then this option adds a delay before generating the pageview event.

## Custom Events

This plugin automatically sends a "pageview" event to all products given as "trackingIds" on every Gatsbys route change.

If you want to call a custom event you have access to `window.gtag` where you can call an event for all products:

```js
window.gtag("event", "click", { ...data })
```

or you can target a specific product:

```js
window.gtag("event", "click", { send_to: "AW-CONVERSION_ID", ...data })
```

In either case don't forget to guard against SSR:

```js
typeof window !== "undefined" && window.gtag("event", "click", { ...data })
```

## `<OutboundLink>` component

To make it easy to track clicks on outbound links the plugin provides a component.

To use it, simply import it and use it like you would the `<a>` element e.g.

```jsx
import React from "react"
import { OutboundLink } from "gatsby-plugin-google-gtag"

export default () => (
<div>
<OutboundLink href="https://www.gatsbyjs.com/plugins/gatsby-plugin-google-gtag/">
Visit the Google Global Site Tag plugin page!
</OutboundLink>
</div>
)
```
62 changes: 62 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# gatsby-plugin-google-gtag-cookieconsent

This is an altered fork of [gatsby-plugin-google-gtag](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-gtag).

Since this might here the [README](./README.gtag.md) at the time of the fork.

## Purpose

Easy configurable plugin to have a cookie consent popup with opt-in before loading any gtag script as required by some gdpr laws.

It stitches together the [gatsby-plugin-google-gtag](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-gtag) plugin
with this awesome [cookieconsent](https://github.com/orestbida/cookieconsent) library.

## Usage

Add this to your `gatsby-config.js`

```js
{
resolve: `gatsby-plugin-google-gtag-cookieconsent`,
options: {
cookieConsentConfig: { ... },
enableForAllEnvironments: true,
googleGtagPluginConfig: { ... },
},
},
```

In order to save space in your config file, I would recommend to move the extensive cookie consent config into a separate file, e.g. `cookie-consent-config`:

```js
exports.cookieConsentConfig = {
categories: {
necessary: {
enabled: true, // this category is enabled by default
readOnly: true, // this category cannot be disabled
},
analytics: {},
},
language: {
default: "en",
translations: {
en: {
consentModal: {
...
},
preferencesModal: {
...
},
},
},
},
};
```

And then import it in your `gatsby-config.js`

```js
const { cookieConsentConfig } = require("./cookie-consent-config");
```

For detailed information of the available config please reference [cookieconsent](https://github.com/orestbida/cookieconsent) or [gatsby-plugin-google-gtag](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-gtag) directly.
10 changes: 10 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from "react"

interface OutboundLinkProps {
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
}

export class OutboundLink extends React.Component<
OutboundLinkProps & React.HTMLProps<HTMLAnchorElement>,
any
> {}
Loading

0 comments on commit 8246479

Please sign in to comment.