DP Cookie Consent
=================
|Donate| |Latest Stable Version| |TYPO3| |License|
This Plugin includes the most popular solution to the EU Cookie law
JavaScript Plugin `Cookie
Consent `__. I extended it with
Script and iFrame helper, so it works with the ePrivacy law.
Though don’t care about the latest EU laws and handle your Cookies with
this Plugins.
F.A.Q.
------
Some F.A.Q. can be found
`here `__
Config
------
TS-Constant
~~~~~~~~~~~
**plugin.tx_cookieconsent.settings.** *(*\ `example
config `__\ *)*
+--------------+--------------------------+-----------------------+---+
| Property | Description | Options | D |
| | | | e |
| | | | f |
| | | | a |
| | | | u |
| | | | l |
| | | | t |
+==============+==========================+=======================+===+
| url | PID to Data Protection | PID | |
+--------------+--------------------------+-----------------------+---+
| target | Link target of read more | | \ |
| | link | | _ |
| | | | b |
| | | | l |
| | | | a |
| | | | n |
| | | | k |
+--------------+--------------------------+-----------------------+---+
| theme | Layout of the consent | edgeless, block, | e |
| | | wire, classic | d |
| | | | g |
| | | | e |
| | | | l |
| | | | e |
| | | | s |
| | | | s |
+--------------+--------------------------+-----------------------+---+
| position | position of the consent | bottom, top, | b |
| | | bottom-left, | o |
| | | bottom-right | t |
| | | | t |
| | | | o |
| | | | m |
| | | | - |
| | | | r |
| | | | i |
| | | | g |
| | | | h |
| | | | t |
+--------------+--------------------------+-----------------------+---+
| dismissOnScr | auto accept consent on | | |
| oll | scroll after XX px | | |
+--------------+--------------------------+-----------------------+---+
| autoOpen | The application | true, false | t |
| | automatically decides | | r |
| | whether the popup should | | u |
| | open | | e |
+--------------+--------------------------+-----------------------+---+
| revokable | Some countries REQUIRE | true, false | t |
| | that users can change | | r |
| | their mind | | u |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| reloadOnRevo | force page reload after | true, false | f |
| ke | revoke | | a |
| | | | l |
| | | | s |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| type | consent types | info, opt-out, opt-in | i |
| | *(*\ `screenshot <#types | | n |
| | >`__\ *)* | | f |
| | | | o |
+--------------+--------------------------+-----------------------+---+
| layout | consent layout | basic, dpextend | b |
| | | | a |
| | | | s |
| | | | i |
| | | | c |
+--------------+--------------------------+-----------------------+---+
| statistics | pre check statistics in | true, false | f |
| | checkboxes layout | | a |
| | | | l |
| | | | s |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| marketing | pre check marketing in | true, false | f |
| | checkboxes layout | | a |
| | | | l |
| | | | s |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| overlay.noti | enable or disable | true, false | f |
| ce | overlay | | a |
| | | | l |
| | | | s |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| overlay.box. | Overlay: Background | rgba(), #hexa | r |
| background | color | | g |
| | | | b |
| | | | a |
| | | | ( |
| | | | 0 |
| | | | , |
| | | | 0 |
| | | | , |
| | | | 0 |
| | | | , |
| | | | . |
| | | | 8 |
| | | | ) |
+--------------+--------------------------+-----------------------+---+
| overlay.box. | Overlay: text color | rgb(), #hexa | # |
| text | | | f |
| | | | f |
| | | | f |
+--------------+--------------------------+-----------------------+---+
| overlay.butt | Overlay: Button | rgba(), #hexa | # |
| on.backgroun | Background color | | b |
| d | | | 8 |
| | | | 1 |
| | | | 8 |
| | | | 3 |
| | | | 9 |
+--------------+--------------------------+-----------------------+---+
| overlay.butt | Overlay: Button text | rgb(), #hexa | # |
| on.text | color | | f |
| | | | f |
| | | | f |
+--------------+--------------------------+-----------------------+---+
| palette.popu | Consent Background color | rgba(), #hexa | # |
| p.background | | | 2 |
| | | | 4 |
| | | | 7 |
| | | | 3 |
| | | | b |
| | | | e |
+--------------+--------------------------+-----------------------+---+
| palette.popu | Consent Text color | rgb(), #hexa | # |
| p.text | | | f |
| | | | f |
| | | | f |
+--------------+--------------------------+-----------------------+---+
| palette.butt | Consent Button | rgba(), #hexa | # |
| on.backgroun | Background color | | f |
| d | | | 9 |
| | | | 6 |
| | | | 3 |
| | | | 3 |
| | | | 2 |
+--------------+--------------------------+-----------------------+---+
| palette.butt | Consent Button Text | rgb(), #hexa | # |
| on.text | color | | f |
| | | | f |
| | | | f |
+--------------+--------------------------+-----------------------+---+
types
^^^^^
the screenshots are based one the
``plugin.tx_cookieconsent.settings.layout = dpextend``
====== ======= ======
info opt-out opt-in
====== ======= ======
|info| |info| |info|
====== ======= ======
TypoScript
~~~~~~~~~~
set you own language values
**plugin.tx_dp_cookieconsent._LOCAL_LANG.{lng}.**
*(*\ `example `__\ *)*
============ ===========================
Property Description
============ ===========================
message the default consent message
dismiss allow cookie button
link read more link
deny decline button
allowall allow all cookie button
dpRequire checkbox required label
dpStatistik checkbox statistic label
dpMarketing checkbox marketing label
media.notice overlay notice headline
media.desc overlay notice text
media.btn overlay button text
============ ===========================
**If you are from a country other than Germany, let me know your legal
text and I will mark it for the next version**
Features
--------
CS_SEO
~~~~~~
This Plugin extends the Config from
`CS_SEO `__ so that the
Google analytics script, tag manager and piwiki will fire after the
Cookie is accepted.
load scripts after accepting
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
**load script sources** If you want to load JavaScript resources after
the Cookie is accepted you can use this snippet
::
**load inline script** If you want to load Inline JavaScript after the
Cookie is accepted use this snippet.
::
The ``data-ignore="1"`` attribute is to cover the
`Scriptmerger `__
engine to not combine these parts.
Checkbox mode
~~~~~~~~~~~~~
You can extend the default cookie message with checkboxes, by activating
the layout in the TYPO3 constants
``plugin.tx_cookieconsent.settings.layout = dpextend``. Now your
customer can choose what types of scripts/cookies he wants to allow.
These 3 types are possible and handled by the consent:
+---------+---------------------------------------------------+--------+
| Type | Description | exampl |
| | | e |
+=========+===================================================+========+
| require | all normal scripts, will always called | ``
With the ``class="dp--iframe"`` the iFrame is hidden by default and
would be shown after accepting of the cookie.
iframe overlay
^^^^^^^^^^^^^^
**if you want to add an overlay to accept Cookies outside of the cookie
hint** |iframe overlay| you can enable this feature in the
TYPO3-constants
``plugin.tx_cookieconsent.settings.overlay.notice = true``
you also can modify the text in this hint individually per iframe
::
build your own overlay
^^^^^^^^^^^^^^^^^^^^^^
or accept/deny cookies outside of the cookie hint, you can use the
followed example
::
**allow cookies**\ ``window.DPCookieConsent.forceAccept(this)``
**deny cookies**\ ``window.DPCookieConsent.forceDeny(this)``
load content after accepting
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
**if you want to add contents that will only be visible if the consent
hint is accepted** you can enable this feature in the TYPO3-constants
``plugin.tx_cookieconsent.settings.overlay.notice = true``
Your HTML markup for this is
.. code:: html
YOUR CONTENT
Events
~~~~~~
+---------------+----------------------------+-------------------------+
| Event | Description | Options |
+===============+============================+=========================+
| dp–cookie-ini | fire event when initialize | |
| t | process is done | |
+---------------+----------------------------+-------------------------+
| dp–cookie-fir | fire after a consent | event.detail.$el |
| e | script/iframe is loaded | |
+---------------+----------------------------+-------------------------+
| dp–cookie-acc | fire when the consent is | |
| ept | accepted | |
+---------------+----------------------------+-------------------------+
| dp–cookie-acc | fire accepted event on | |
| ept-init | revisited | |
+---------------+----------------------------+-------------------------+
| dp–cookie-den | fire when the consend is | |
| y | denied | |
+---------------+----------------------------+-------------------------+
| dp–cookie-rev | fire when the consent is | |
| oke | revoked | |
+---------------+----------------------------+-------------------------+
.. code:: javascript
document.addEventListener('dp--cookie-fire', function (e) {
console.log('dp--cookie-fire', e.detail.$el);
});
document.addEventListener('dp--cookie-accept', function (e) {
console.log('dp--cookie-accept', e);
});
document.addEventListener('dp--cookie-deny', function (e) {
console.log('dp--cookie-deny', e);
});
document.addEventListener('dp--cookie-revoke', function (e) {
console.log('dp--cookie-deny', e);
});
Dynamic Checkboxes
~~~~~~~~~~~~~~~~~~
With this feature you can add or modify the checkbox types by
configuration. All you have to do is setting your new checkbox in TS and
add it to the partial template:
Configuration/TypoScript/setup.txt:
::
page.footerData.998.20.settings.checkboxes.thirdparty = {$plugin.tx_cookieconsent.settings.thirdparty}
Resources/Private/Partials/CookieSelection.html:
::
`F.A.Q. How to remove unneccesary
checkboxes `__
Please give me feedback
-----------------------
I would appreciate any kind of feedback or ideas for further
developments to keep improving the extension for your needs.
Say thanks! and support me
--------------------------
You like this extension? Get something for me (surprise!) from my
wishlist on
`Amazon `__ or
|Donate| the next pizza. Thanks a lot!
Contact us
~~~~~~~~~~
- `E-Mail `__
- `GitHub `__
- `Homepage `__
- `TYPO3.org `__
- `Packagist.org
(composer) `__
- `NPM -
Version `__
.. |Donate| image:: https://img.shields.io/badge/Donate-PayPal-green.svg?style=for-the-badge
:target: https://www.paypal.me/dirkpersky
.. |Latest Stable Version| image:: https://img.shields.io/packagist/v/dirkpersky/typo3-dp_cookieconsent?style=for-the-badge
:target: https://packagist.org/packages/dirkpersky/typo3-dp_cookieconsent
.. |TYPO3| image:: https://img.shields.io/badge/TYPO3-dp__cookieconsent-%23f49700?style=for-the-badge
:target: https://extensions.typo3.org/extension/dp_cookieconsent/
.. |License| image:: https://img.shields.io/packagist/l/dirkpersky/typo3-dp_cookieconsent?style=for-the-badge
:target: https://packagist.org/packages/dirkpersky/typo3-dp_cookieconsent
.. |info| image:: Documentation/type_info.png
.. |info| image:: Documentation/type_opt-out.png
.. |info| image:: Documentation/type_opt-in.png
.. |iframe overlay| image:: Documentation/iframe-overlay.png
.. |Donate| image:: https://img.shields.io/badge/Donate-PayPal-green.svg
:target: https://www.paypal.me/dirkpersky