DP Cookie Consent
=================
|Donate| |Latest Stable Version| |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 you Cookies with
this Plugins.
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 accecpt consent on | | |
| oll | scroll after XX px | | |
+--------------+--------------------------+-----------------------+---+
| 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 basesd 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 snipped
::
**load inline script** If you want to load Inline JavaScript after the
Cookie is accepted use this snipped.
::
The ``data-ignore="1"`` attribute ist to cover the
`Scriptmerger `__
engine to not Combine this parts.
Checkboxe mode
~~~~~~~~~~~~~~
You can extend the default cookie message with checkboxes, by
activiating the layout in the TYPO3 constants
``plugin.tx_cookieconsent.settings.layout = dpextend``. Now your
customer can choose what types of scripts/cookies he want to allow.
This 3 types are possible and handled by the consent:
+---------+---------------------------------------------------+--------+
| Type | Description | exampl |
| | | e |
+=========+===================================================+========+
| require | all normal script, will always called | ``
With the ``class="dp--iframe"`` the iFrame is hidden in default and
would be shown after the cookie acceptioning.
iframe overlay
^^^^^^^^^^^^^^
**if you want to add an overlay to accept Cookies outside from 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 individuel per iframe
::
build your own overlay
^^^^^^^^^^^^^^^^^^^^^^
or accept/deny cookies outside of the cookie hin, you can use the
followed example
::
**allow cookies**\ ``window.DPCookieConsent.forceAccept(this)``
**deny cookies**\ ``window.DPCookieConsent.forceDeny(this)``
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:
::
checkboxes {
statistics = {$plugin.tx_cookieconsent.settings.statistics}
marketing = {$plugin.tx_cookieconsent.settings.marketing}
thirdparty = {$plugin.tx_cookieconsent.settings.thirdparty}
}
Resources/Private/Partials/CookieSelection.html:
::
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) `__
.. |Donate| image:: https://img.shields.io/badge/Donate-PayPal-green.svg
:target: https://www.paypal.me/dirkpersky
.. |Latest Stable Version| image:: https://poser.pugx.org/dirkpersky/typo3-dp_cookieconsent/v/stable
:target: https://packagist.org/packages/dirkpersky/typo3-dp_cookieconsent
.. |License| image:: https://poser.pugx.org/dirkpersky/typo3-dp_cookieconsent/license
: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