This project has been abandoned. Please consider using gatsby-plugin-tagmanager instead to include Klaro into your project.
This plugin allows to add KIProtect Klaro to your Gatsby site. The plugin adds the necessary configuration and script in the head of your page.
The installation of gatsby-plugin-klaro is done the same way as you would install other plugins.
Refer to Using a plugin in your site for a detailed guide.
Note that you need npm to use this plugin. You might also use another prefered package manager that you currently use.
Run the following commandto install gatsby-plugin-klaro:
npm install gatsby-plugin-klaro
Put the plugin into your gatsby-config.js. It is important that you insert the plugin at the top of
your loaded plugins. The order of the plugins in your gatsby-config.js specifies their load order.
As Klaro is a CMP it is recommended to put it at the top of your <head></head>.
module.exports = {
plugins: [
...
{
`gatsby-plugin-klaro`,
options: {
...
}
},
...
]
};The version of Klaro that should be used. Use the same version strings as you find on Releases on the Klaro repository. Example value: "v0.7.11"
The Klaro url that should be used to load the Klaro script.
You can use %version% as a placeholder for klaroVersion.
The following example shows how to use a local Klaro version that lays in your static content folder.
Example value: "klaro.js"
The configuration that you want to apply to Klaro.
This value is a JSON object that contains the necessary configuration of Klaro.
You can either use the config or configUrl option to configure Klaro.
Note that config has a higher priority than configUrl and will override configUrl
if both options are set. Also no configuration merging will be applied.
IMPORTANT: When using the inline configuration, you must provide a string
(wrap your regex in " or ') as the cookie pattern. The reason behind this is that
the Gatsby build process loses your regex object before this plugin can deal with it.
Example value: {...}
The URL to a JavaScript file that should be loaded as configuration source.
Please use the default variable when in your JavaScript configuration file
which is window.klaroConfig for this to work properly.
You can either use the config or configUrl option to configure Klaro.
Note that config has a higher priority than configUrl and will override configUrl
if both options are set. Also no configuration merging will be applied.
Example value: "config.js"
Specify if Klaro should be included in development builds. Example value: true
Usage with the default URL for Klaro and an embedded configuration:
module.exports = {
plugins: [
...
{
resolve: "gatsby-plugin-klaro",
options: {
includeInDevelopment: true,
klaroVersion: "v0.7.11",
config: {
privacyPolicy: "/privacy",
apps: [{
name: "google-analytics",
default: true,
title: "Google Analytics",
purposes: ["statistics"],
cookies: ["/^ga/i"],
},],
}
}
},
...
],
};Usage with a custom URL for Klaro and an external configuration located at static/config.js:
module.exports = {
plugins: [
...
{
resolve: "gatsby-plugin-klaro",
options: {
includeInDevelopment: true,
klaroVersion: "v0.7.11",
configUrl: "config.js"
}
},
...
],
};To develop locally you need the following tools:
- NodeJS (recommended version: 14.15.4)
- NPM
To set the project up, simply let npm install your dependencies as always:
npm installTo build the project use the build script provided by npm:
npm run buildNote that building will also run eslint.
To compile the project run the following npm script:
npm run compileTo clean the compiled output (which lays in the root directory), run:
npm run cleanThe project uses eslint as linter. You can run the tool using npm.
Use the following npm command to run eslint:
npm run lintYou are welcome to contribute to gatsby-plugin-klaro! Refer to Contributing for information about issues and code contributions.