Improve "Ask for consent" page (#20667)

* update content of asking for consent page

* build vue files

* reuse existing list of consent managers

* built vue files

* update UI tests

core/SiteContentDetector.php

@@ -354,6 +354,10 @@ private function detectConsentManager(): void
 
         foreach ($defs as $consentManagerId => $consentManagerDef) {
             foreach ($consentManagerDef['detectStrings'] as $dStr) {
+                if (empty($dStr)) {
+                    continue; // skip empty detections
+                }
+
                 if (strpos($this->siteResponse['data'], $dStr) !== false && array_key_exists($consentManagerId, $defs)) {
                     $this->consentManagerId = $consentManagerId;
                     $this->consentManagerName = $consentManagerDef['name'];
@@ -380,6 +384,10 @@ private function detectConsentManager(): void
      * Return an array of consent manager definitions which can be used to detect their presence on the site and show
      * the associated guide links
      *
+     * Note: This list is also used to display the known / supported consent managers on the "Ask for Consent" page
+     * For adding a new consent manager to this page, it needs to be added here. If a consent manager can't be detected
+     * automatically, simply leave the detections empty.
+     *
      * @return array[]
      */
     public static function getConsentManagerDefinitions(): array

plugins/PrivacyManager/Controller.php

@@ -178,6 +178,11 @@ public function consent()
             $view->consentManagerUrl = $this->siteContentDetector->consentManagerUrl;
             $view->consentManagerIsConnected = $this->siteContentDetector->isConnected;
         }
+
+        $consentManagers = SiteContentDetector::getConsentManagerDefinitions();
+        $knownConsentManagers = array_combine(array_column($consentManagers, 'name'), array_column($consentManagers, 'url'));
+
+        $view->knownConsentManagers = $knownConsentManagers;
         $this->setBasicVariablesView($view);
         return $view->render();
     }

plugins/PrivacyManager/PrivacyManager.php

@@ -351,7 +351,8 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'PrivacyManager_GeolocationAnonymizeIpNote';
         $translationKeys[] = 'PrivacyManager_GetPurgeEstimate';
         $translationKeys[] = 'PrivacyManager_HowDoIAskForConsent';
-        $translationKeys[] = 'PrivacyManager_HowDoIAskForConsentIntroduction';
+        $translationKeys[] = 'PrivacyManager_HowDoIAskForConsentIntro';
+        $translationKeys[] = 'PrivacyManager_HowDoIAskForConsentOutro';
         $translationKeys[] = 'PrivacyManager_IndividualsRights';
         $translationKeys[] = 'PrivacyManager_IndividualsRightsAccess';
         $translationKeys[] = 'PrivacyManager_IndividualsRightsChildren';
@@ -425,8 +426,9 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'PrivacyManager_VisitsMatchedCriteria';
         $translationKeys[] = 'PrivacyManager_VisitsSuccessfullyDeleted';
         $translationKeys[] = 'PrivacyManager_VisitsSuccessfullyExported';
-        $translationKeys[] = 'PrivacyManager_WhenConsentIsNeeded1';
-        $translationKeys[] = 'PrivacyManager_WhenConsentIsNeeded2';
+        $translationKeys[] = 'PrivacyManager_WhenConsentIsNeededPart1';
+        $translationKeys[] = 'PrivacyManager_WhenConsentIsNeededPart2';
+        $translationKeys[] = 'PrivacyManager_WhenConsentIsNeededPart3';
         $translationKeys[] = 'PrivacyManager_WhenDoINeedConsent';
         $translationKeys[] = 'UsersManager_AllWebsites';
         $translationKeys[] = 'PrivacyManager_ConsentManager';

plugins/PrivacyManager/lang/en.json

@@ -14,10 +14,12 @@
         "ConsentExplanation": "Consent means offering individuals choice and control about how their personal data is processed.",
         "ClickHereSettings": "Click here to access the %s settings.",
         "WhenDoINeedConsent": "When do I need to ask for user consent?",
-        "WhenConsentIsNeeded1": "In the context of the %1$sGDPR privacy regulations%2$s, when you are processing personal data, in some cases you will need to ask for your users' consent. To identify whether you need to ask for consent, you need to determine whether your lawful basis for processing personal data is \"Consent\" or \"Legitimate interest\", or whether you can avoid collecting personal data altogether. We recommend to learn more about the %3$slawful basis under the GDPR for Matomo%4$s.",
-        "WhenConsentIsNeeded2": "Note that when you require to have your users' consents and if you cannot prove that you got the \"Consent\" of your users in the past, then we recommend to %1$sanonymise your previously tracked users' raw data%2$s.",
+        "WhenConsentIsNeededPart1": "The %1$sGDPR privacy regulations%2$s require you to ask for your users' consent when processing personal data in some cases. To determine whether you need to ask for consent, you need to identify your lawful basis for processing personal data. This can be either \"Consent\" or \"Legitimate interest\", or you may be able to avoid collecting personal data altogether.",
+        "WhenConsentIsNeededPart2": "It's recommended to learn more about the lawful basis for processing personal data under GDPR. You can find more information on this topic on %1$sour blog%2$s.",
+        "WhenConsentIsNeededPart3": "Please note that if you require your users' consent, and you cannot prove that you obtained their \"Consent\" in the past, we recommend anonymizing your previously tracked users' raw data. Anonymizing your previously tracked users' raw data can be done through the Privacy Manager in Matomo %1$slearn more%2$s.",
         "HowDoIAskForConsent": "How do I ask users for consent?",
-        "HowDoIAskForConsentIntroduction": "Learn everything about %1$sasking for cookie or tracking consent in our integration guide.%2$s",
+        "HowDoIAskForConsentIntro": "Matomo has guides available for setting up consent tracking with the following popular consent managers:",
+        "HowDoIAskForConsentOutro": "If you do not use one of the above consent managers, you can implement %1$stracking with consent using the Matomo JavaScript API%2$s.",
         "AnonymizeSites": "Anonymize the data of this site(s)",
         "AnonymizeRowDataFrom": "Anonymize all raw data starting from:",
         "AnonymizeRowDataTo": "Anonymize all raw data up to:",

plugins/PrivacyManager/templates/askingForConsent.twig

@@ -8,5 +8,6 @@
         consent-manager-name="{{ consentManagerName|default('')|json_encode }}"
         consent-manager-url="{{ consentManagerUrl|default('')|json_encode }}"
         consent-manager-is-connected="{{ consentManagerIsConnected|default(false)|json_encode }}"
+        consent-managers="{{ knownConsentManagers|json_encode }}"
     ></div>
 {% endblock %}

plugins/PrivacyManager/tests/UI/PrivacyManager_ConsentManager_spec.js

@@ -20,48 +20,10 @@ describe("PrivacyManager_ConsentManager", function () {
         testEnvironment.save();
     });
 
-    async function setAnonymizeStartEndDate()
-    {
-        // make sure tests do not fail every day
-        await page.waitForSelector('input.anonymizeStartDate');
-        await page.waitForSelector('input.anonymizeEndDate');
-        await page.waitForTimeout(100);
-        await page.evaluate(function () {
-            $('input.anonymizeStartDate').val('2018-03-02').change();
-        });
-        await page.waitForTimeout(100);
-        await page.evaluate(function () {
-            $('input.anonymizeEndDate').val('2018-03-02').change();
-        });
-        await page.waitForTimeout(100);
-    }
-
-    async function loadActionPage(action)
-    {
-        await page.goto('about:blank');
-        await page.goto(urlBase + action);
-        await page.waitForNetworkIdle();
-
-        if (action === 'privacySettings') {
-            await setAnonymizeStartEndDate();
-        }
-    }
-
-    async function capturePage(screenshotName) {
-        await page.waitForNetworkIdle();
-        expect(await page.screenshotSelector('.pageWrap,#notificationContainer,.modal.open')).to.matchImage(screenshotName);
-    }
-
-
-    async function captureModal(screenshotName) {
-        await page.waitForNetworkIdle();
-        const modal = await page.$('.modal.open');
-        expect(await modal.screenshot()).to.matchImage(screenshotName);
-    }
-
     it('should load privacy asking for consent page', async function() {
-        await loadActionPage('consent');
-        await capturePage('consent_default');
+        await page.goto(urlBase + 'consent');
+        await page.waitForNetworkIdle();
+      expect(await page.screenshotSelector('.pageWrap,#notificationContainer,.modal.open')).to.matchImage('consent_default');
     });
 
 });