Giter Site home page Giter Site logo

mediengarage / typo3-piwik-consent-manager Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 132 KB

GDPR compliant TYPO3 content elements which work great with PIWIK Consent Manager.

PHP 71.73% HTML 24.18% CSS 2.25% JavaScript 1.84%
consent-management gdpr piwik typo3

typo3-piwik-consent-manager's Introduction

Mediengarage Logo

PIWIK Consent Manager TYPO3 extension

PIWIK Consent Manager integration in order to make TYPO3 content elements GDPR compliant.

You can click on the images in this readme to see a larger version.

  1. What does it do?
  2. Installation
  3. Quick Start
  4. TypoScript Condition
  5. Roadmap

๐Ÿค” What does it do?

Instead of privacy harming content a placeholder will be displayed to the user.

Bildschirmfoto 2022-06-09 um 21 56 47

Only when the user gives its consent on the PIWIK Consent Manager the page is reloaded and the actual content will be shown.

Bildschirmfoto 2022-06-09 um 21 57 13

๐Ÿ“ฆ Installation

  1. Install extension

    • Composer

      composer req mediengarage/piwik-consent-manager:~0.1
    • Non Composer

      If you want to install into a non composer TYPO3, using the TER is recommended. You can download and install it directly from the Extension Manager of your TYPO3 instance.

  2. Include static template into your root TypoScript template and click save:

    include_static_template
  3. Navigate to Configure extensions from the Settings module under Admin Tools:

    configure_extensions
  4. Enter your PIWIK Pro credentials. Check step 5 to see from where to retrieve those values from. Keep them secret!

    extensions settings
  5. Login to your PIWIK Pro account and navigate to Menu -> Administration. Choose your website and click the Installation tab.

    piwik_installation

๐Ÿš€ Quick Start

Quickstart shows how to embed a YouTube video which is only displayed when a user gives its consent. A placeholder will be shown if no consent was set or it was declined.

In order to have a basic website for presentation purposes the quick start guide uses https://github.com/benjaminkott/bootstrap_package.

  1. Create a new content element anywhere on the page and choose YouTube from the new privacy tab:

    new_content_element
  2. Paste the embed markup into text area and choose a consent type to which the element should react. React means it will be displayed when the user gives its consent on that type. The default placeholder image can be overwritten on a per content element basis in the image tab.

    yt_content_element
  3. Login to your PIWIK Pro account and navigate to Menu -> Tag Manager. Create an asynchronous tag for the chosen consent type (Custom Consent in this example) in order to reload the page when a consent was sent. Don't forget to save and publish (or debug to test on production system).

    <script>
        location.reload();
    </script>
    piwik_tag

๐Ÿค“ Custom TypoScript Condition

In order to e.g. embed JavaScript based on whether a consent is set or not a custom TypoScript condition can be used.

[ConsentAspect('custom_consent')]
page.includeJSFooter {
  foo = EXT:bar/Resources/Public/JavaScript/script.js
}
[GLOBAL]

๐Ÿ›ฃ Roadmap

  • We're currently working on a solution that works using ajax instead reloading the complete page.
  • The readme is clearly under construction ๐Ÿ™‚

typo3-piwik-consent-manager's People

Contributors

fazzyx avatar wipster avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.