PHPackages madj2k/t3-klarokratie - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. madj2k/t3-klarokratie ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) madj2k/t3-klarokratie ===================== Includes Klaro! Consent-Manager into TYPO3. Completely file-based configuration for versioning without having to take care of database-entries. This extension automatically adds a consent-overlay to embedded YouTube- and Vimeo-Videos. It also comes with a ready-to-use integration for Google Analytics / Google Tag Manager and etracker. v13.4.23-stable(5mo ago)1854GPL-2.0+JavaScriptPHP >=7.4 Since Apr 8Pushed 5mo ago1 watchersCompare [ Source](https://github.com/skroggel/t3-klarokratie)[ Packagist](https://packagist.org/packages/madj2k/t3-klarokratie)[ Docs](https://www.steffenkroggel.de)[ RSS](/packages/madj2k-t3-klarokratie/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (1)Versions (44)Used By (0) Klarokratie =========== [](#klarokratie) Includes Klaro! consent-manager into TYPO3. Completely file-based configuration for versioning without having to take care of database-entries. This extension automatically adds a consent-overlay to embedded YouTube- and Vimeo-Videos. More information on Klaro! can be found here: - - Installation & Basic Configuration -------------------------------------- [](#installation--basic-configuration) Simply install the extension. If you want to use the available tracking-code-insertion for etracker or Google Analytics also include the TypoScript in your Rootpage (see below). Otherwise you don't need the TypoScript. After installation you have to define the path to your Klaro!-configuration in your website-setup (YAML). You can also use extension-paths if you use a site-package. ``` klarokratie: klaro: config: EXT:site_default/Resources/Public/Config/KlaroConfig.js customCss: EXT:site_default/Resources/Public/Css/Klaro.css ``` Alternatively you can use this older notations (working, but discouraged for the sake of having clear namespaces): ``` klaro: config: EXT:site_default/Resources/Public/Config/KlaroConfig.js customCss: EXT:site_default/Resources/Public/Css/Klaro.css ``` ``` klaroConfig: EXT:site_default/Resources/Public/Config/KlaroConfig.js klaroCustomCss: EXT:site_default/Resources/Public/Css/Klaro.css ``` If you do not define any configuration or custom CSS a default configuration with the default styles is used. However, you can explicitly disable the klaro! Consent Manager by using the following setting: ``` klarokratie: klaro: disable: true ``` or - accordingly the discouraged (!!!) older versions - ``` klaro: disable: true ``` ``` klaroDisable: true ``` Modular Configuration using Includes ------------------------------------ [](#modular-configuration-using-includes) Starting with the latest version, the Klarokratie extension supports a modular approach to configuration: - You can define a base configuration file (e.g. KlaroConfigMinimal.js) - Optionally, you can then provide one or more additional config-files ("includes") that are merged into the base configuration. This allows you to separate reusable parts and keep your base config clean and minimal. Example setup: ``` klarokratie: klaro: config: EXT:klarokratie/Resources/Public/Config/KlaroConfigMinimal.js includes: - EXT:klarokratie/Resources/Public/Config/Includes/HCaptcha.js - EXT:klarokratie/Resources/Public/Config/Includes/YouTube.js - EXT:klarokratie/Resources/Public/Config/Includes/Vimeo.js - EXT:klarokratie/Resources/Public/Config/Includes/GoogleAnalytics.js ``` All configuration-scripts are delivered as a single combined JavaScript file to reduce HTTP requests. If no includes are defined, only the base config is loaded without merging. This is the default behavior. The extension already comes with several useful includes for common services: - Google Analytics - Google Ads - etracker - YouTube - Vimeo - HCaptcha These are located in: ``` EXT:klarokratie/Resources/Public/Config/Includes/ ``` You can use them directly or copy and customize them in your own site package. Note: if you use includes, the `EXT:klarokratie/Resources/Public/Config/KlaroConfigMinimal.js` is used instead of `EXT:klarokratie/Resources/Public/Config/KlaroConfig.js` You can also override the default translations. You can find an example file here. ``` EXT:klarokratie/Resources/Public/Config/Overrides/ ``` Just copy it to your site-extension and set your own translations. You can use it like so: ``` klarokratie: klaro: config: EXT:klarokratie/Resources/Public/Config/KlaroConfigMinimal.js includes: - EXT:site_default/Resources/Public/Config/Overrides/Transations.js ``` Advanced Configuration ---------------------- [](#advanced-configuration) ### Optional: Use Tracking-Code insertion for etracker or Google Analytics [](#optional-use-tracking-code-insertion-for-etracker-or-google-analytics) If you want to use the available tracking-code-insertion for etracker or Google Analytics also include the TypoScript in your Rootpage. Otherwise you don't need the TypoScript. **An enabled tracking-code-insertion would either include the current etracker-tracklet or the current Google Analytics tracking code.** In the TypoScript you will find the following configuration options that should be self-explaining: ``` plugin.tx_klarokratie { settings { etracker { # cat=plugin.tx_klarokratie/etracker; type=bool; label=Enable etracker code insertion enable = 0 # cat=plugin.tx_klarokratie/etracker; type=string; label=The secure code of your etracker account secureCode = # cat=plugin.tx_klarokratie/etracker; type=bool; label=Enable blocking cookies on page load (should be active according to GDPR) blockCookiesOnPageLoad = 1 # cat=plugin.tx_klarokratie/etracker; type=bool; label=Respect DoNotTrack in browser (should be active according to GDPR) respectDoNotTrack = 1 # cat=plugin.tx_klarokratie/etracker; type=bool; label=Block tracking script before consent blockScriptBeforeConsent = 0 # cat=plugin.tx_klarokratie/etracker; type=bool; label=Do not use Session Storage (WARNING: this has a negative impact on page- and tracking-performance!) doNotUseSessionStorage = 0 } googleAnalytics { # cat=plugin.tx_klarokratie/googleAnalytics; type=bool; label=Enable Google Analytics code insertion enable = 0 # cat=plugin.tx_klarokratie/googleAnalytics; type=bool; label=Use Google Tag Manager useTagManager = 0 # cat=plugin.tx_klarokratie/googleAnalytics; type=string; label=The Tag-ID of your Google Analytics account tagId = } } } ``` There are also Klaro!-configuration-files for etracker and Google Analytics included. This files handle the cookie-opt-in for your tracking according to GDPR. You can use them by setting the desired file in your configuration: ``` klarokratie: klaro: config: EXT:site_default/Resources/Public/Config/KlaroConfigEtracker.js ``` or ``` klarokratie: klaro: config: EXT:site_default/Resources/Public/Config/KlaroConfigGoogleAnalytics.js ``` If you have a multi-site setup you can either define different tracking-options in each rootpage - or use the site-configuration (YAML). Using the site-configuration is the preferred way. **Please note: settings in the site-configuration always override TypoScript-settings.** ``` klarokratie: googleAnalytics: enable: 1 tagId: 123456 ``` **IMORTANT:** to ensure that the tracking code is only executed if consent is given, set blockScriptBeforeConsent = 1. For reasons of backwards-compatibility the default value currently is 0. ### Optional: Categories for etracker (et\_areas) [](#optional-categories-for-etracker-et_areas) If you use etracker there is a lib-object included which you can use to set hierarchical categories. **IMPORTANT: In order to take effect, you have to use COA-objects in your lib-override-TypoScript!** Below you find a hypothetical example that sets the current domain as first category and as category of the second level the project-name is used that is fetched from the page-properties of the current page via the field "tx\_example\_project" as reference to table "tx\_example\_domain\_model\_project". The example below would result in the following category-value (et\_areas) for etracker: ``` www.mydomain.com/myProjectName ``` ``` lib { txKlarokratie { etracker { domain = COA domain { 10 = TEXT 10.data = getIndpEnv:HTTP_HOST } categoryLevel1 = COA categoryLevel1 { 30 = RECORDS 30 { source.data = levelfield: -1 , tx_example_project, slide tables = tx_example_domain_model_project conf.tx_example_domain_model_project = TEXT conf.tx_example_domain_model_project { field = name override.field = short_name } // Default value if empty stdWrap.ifEmpty.cObject = COA stdWrap.ifEmpty.cObject { 10 = TEXT 10.value = Default } } } } } } ``` Re-Open Modal ------------- [](#re-open-modal) If you want to show a menu-item on your website to re-open the modal, this extension adds a field tx\_klarokratie\_open\_modal to the pages-table including the corresponding TCA-configuration for convenient switching using the page properties in the backend. You can use this field to render your menu accordingly and add the required JS to re-open the modal instead of a normal link to the page. Example: ``` {title} ``` Custom CSS ---------- [](#custom-css) It is possible to include a custom CSS-file for adaption the Klaro! overlay to your needs (see second line above). The CSS partly uses variables which you can override in your custom CSS: ### Plain CSS [](#plain-css) ``` body .klaro { --green1: #d63f11; --green2: #d63f11; --green3: #d63f11; --font-family: Helvetica, Arial, sans-serif; } body .klaro .context-notice { background-color: #f2f2f2; font-size: 1.2em; } body .klaro label { margin:0; } body .klaro .purposes { display: none; } body .klaro .cookie-modal .cm-btn, body .klaro .context-notice .cm-btn, body .klaro .cookie-notice .cm-btn { text-transform: uppercase; font-size:14px; font-weight: 600; border-radius: 8px; display: inline-block; border: 0px; cursor: pointer; letter-spacing: 0.01em; border: 2px solid #d63f11; transition: all 0.2s ease-out; line-height: 1.2; text-align:center; padding: 12px; } body .klaro .cookie-modal .cm-btn:hover, body .klaro .context-notice .cm-btn:hover, body .klaro .cookie-notice .cm-btn:hover { background-color:#fff; color: #d63f11; } body .klaro .context-notice .cm-btn.cm-btn-success-var, body .klaro .cookie-notice .cm-btn.cm-btn-success-var, body .klaro .cookie-modal .cm-btn.cm-btn-success-var, body .klaro .cookie-modal .cm-btn.cm-btn-accept, body .klaro .cookie-modal .cm-btn.cm-btn-decline { background-color: #505050; border: 2px solid #505050; } body .klaro .context-notice .cm-btn.cm-btn-success-var:hover, body .klaro .cookie-notice .cm-btn.cm-btn-success-var:hover, body .klaro .cookie-modal .cm-btn.cm-btn-success-var:hover, body .klaro .cookie-modal .cm-btn.cm-btn-accept:hover, body .klaro .cookie-modal .cm-btn.cm-btn-decline:hover { background-color:#fff; color: #505050; } body .klaro .context-notice .cm-list-label .slider, body .klaro .cookie-notice .cm-list-label .slider, body .klaro .cookie-modal .cm-list-label .slider { background-color: #676767; } body .klaro .cookie-modal .cm-caret, body .klaro .cookie-modal .cm-list-description { font-size: 0.8em ; } body .klaro .cookie-modal .cm-modal .cm-header, body .klaro .cookie-modal .cm-list-title { font-size: 1.2em; } body .klaro .klaro-table + .klaro-table { margin-top: 1em } body .klaro .klaro-table th{ padding-right: 1em } ``` ### Example with SASS and Bootstrap [](#example-with-sass-and-bootstrap) ``` // We need at least the mixins @import "../../node_modules/bootstrap/scss/mixins"; @import "default/00_mixins/_import"; @import "default/10_config/_variables"; @import "default/10_config/_maps"; @import "default/20_basics/_cta"; body .klaro { --green1: #{$color-primary}; --green2: #{$color-primary}; --green3: #{$color-primary}; --font-family: #{$font-family-sans-serif}; &.cm-as-context-notice { padding:0; } .context-notice { @include copy; background-color: $color-secondary-200; border-color: $color-secondary; border-radius:0; } label { margin:0; } .purposes { display: none; } .cookie-modal .cm-btn, .context-notice .cm-btn, .cookie-notice .cm-btn { border-radius: 0; @extend .cta; @extend .cta-small; } .context-notice .cm-btn.cm-btn-success-var, .cookie-notice .cm-btn.cm-btn-success-var, .cookie-modal .cm-btn.cm-btn-success-var, .cookie-modal .cm-btn.cm-btn-accept, .cookie-modal .cm-btn.cm-btn-decline { color: $color-white; background-color: $color-secondary; &:hover { background-color: $color-secondary-600; } } .context-notice .cm-list-label .slider, .cookie-notice .cm-list-label .slider, .cookie-modal .cm-list-label .slider { background-color: #676767; } .cookie-modal .cm-caret, .cookie-modal .cm-list-description { @include copy-small; } .cookie-modal .cm-header{ @include copy; .title { @include h2; } } .cookie-modal .cm-list-title { @include h6; margin-bottom: 0 } .cookie-modal .cm-footer-buttons { margin-top: 1rem; } .klaro-table + .klaro-table { margin-top: 1em } .klaro-table th{ padding-right: 1em } } ``` ### Health Score 41 — FairBetter than 89% of packages Maintenance72 Regular maintenance activity Popularity19 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~15 days Recently: every ~30 days Total 41 Last Release 158d ago Major Versions v12.4.20-stable → v13.4.0-stable2025-02-19 ### Community Maintainers ![](https://www.gravatar.com/avatar/ca11ace9490b8fe0b145e7d32464fba5c8eddaa88d700b95d32241a226623e76?d=identicon)[SteffenKroggel](/maintainers/SteffenKroggel) --- Top Contributors [![skroggel](https://avatars.githubusercontent.com/u/8121847?v=4)](https://github.com/skroggel "skroggel (111 commits)") --- Tags TYPO3 CMSgdprconsent-managementdsgvoKlaro ### Embed Badge ![Health badge](/badges/madj2k-t3-klarokratie/health.svg) ``` [![Health](https://phpackages.com/badges/madj2k-t3-klarokratie/health.svg)](https://phpackages.com/packages/madj2k-t3-klarokratie) ``` ### Alternatives [derhansen/sf_event_mgt Configurable event management and registration extension based on ExtBase and Fluid 64313.9k6](/packages/derhansen-sf-event-mgt)[georgringer/gdpr Make TYPO3 more compatible to GDPR 4657.1k](/packages/georgringer-gdpr)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 33584.6k13](/packages/brotkrueml-schema)[causal/extractor This extension detects and extracts metadata (EXIF / IPTC / XMP / ...) from potentially thousand different file types (such as MS Word/Powerpoint/Excel documents, PDF and images) and bring them automatically and natively to TYPO3 when uploading assets. Works with built-in PHP functions but takes advantage of Apache Tika and other external tools for enhanced metadata extraction. 16244.5k](/packages/causal-extractor)[codingfreaks/cf-cookiemanager Manage cookies, scripts, and GDPR compliance on your Typo3 website with CodingFreaks Typo3 Cookie Manager. Customize cookie banners, streamline workflow, and enhance user experience. Ensure GDPR compliance and take control of cookie management with our Typo3 cookie management extension. Visit the official Typo3 Documentation page to learn more. 1625.8k](/packages/codingfreaks-cf-cookiemanager)[jweiland/events2 Events 2 - Create single and recurring events 2062.4k2](/packages/jweiland-events2) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)