[Vue] migrate AnonymizeIpController to vue (#18975)

* start migrating privacymanager controller

* finish migration and get to build

* fix UI tests

* update screenshot

* get to work in UI

8 files changed, 654 insertions, 104 deletions

diff --git a/plugins/PrivacyManager/PrivacyManager.php b/plugins/PrivacyManager/PrivacyManager.php
index f11ff26b43..014ebe829e 100644
--- a/plugins/PrivacyManager/PrivacyManager.php
+++ b/plugins/PrivacyManager/PrivacyManager.php
@@ -283,6 +283,24 @@ class PrivacyManager extends Plugin
         $translationKeys[] = 'PrivacyManager_GdprToolsPageIntroAccessRight';
         $translationKeys[] = 'PrivacyManager_GdprToolsPageIntroEraseRight';
         $translationKeys[] = 'PrivacyManager_GdprToolsOverviewHint';
+        $translationKeys[] = 'PrivacyManager_UseAnonymizeIp';
+        $translationKeys[] = 'PrivacyManager_AnonymizeIpMaskLengtDescription';
+        $translationKeys[] = 'PrivacyManager_UseAnonymizedIpForVisitEnrichment';
+        $translationKeys[] = 'PrivacyManager_PseudonymizeUserId';
+        $translationKeys[] = 'PrivacyManager_UseAnonymizeOrderId';
+        $translationKeys[] = 'PrivacyManager_ForceCookielessTracking';
+        $translationKeys[] = 'PrivacyManager_ForceCookielessTrackingDescription';
+        $translationKeys[] = 'PrivacyManager_ForceCookielessTrackingDescription2';
+        $translationKeys[] = 'PrivacyManager_ForceCookielessTrackingDescriptionNotWritable';
+        $translationKeys[] = 'PrivacyManager_AnonymizeIpInlineHelp';
+        $translationKeys[] = 'PrivacyManager_AnonymizeIpDescription';
+        $translationKeys[] = 'PrivacyManager_GeolocationAnonymizeIpNote';
+        $translationKeys[] = 'PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote';
+        $translationKeys[] = 'PrivacyManager_PseudonymizeUserIdNote';
+        $translationKeys[] = 'PrivacyManager_PseudonymizeUserIdNote2';
+        $translationKeys[] = 'PrivacyManager_AnonymizeOrderIdNote';
+        $translationKeys[] = 'PrivacyManager_AnonymizeReferrerNote';
+        $translationKeys[] = 'PrivacyManager_AnonymizeReferrer';
     }
 
     public function setTrackerCacheGeneral(&$cacheContent)
@@ -301,7 +319,6 @@ class PrivacyManager extends Plugin
     {
         $jsFiles[] = "plugins/PrivacyManager/angularjs/report-deletion.model.js";
         $jsFiles[] = "plugins/PrivacyManager/angularjs/schedule-report-deletion/schedule-report-deletion.controller.js";
-        $jsFiles[] = "plugins/PrivacyManager/angularjs/anonymize-ip/anonymize-ip.controller.js";
         $jsFiles[] = "plugins/PrivacyManager/angularjs/do-not-track-preference/do-not-track-preference.controller.js";
         $jsFiles[] = "plugins/PrivacyManager/angularjs/delete-old-logs/delete-old-logs.controller.js";
         $jsFiles[] = "plugins/PrivacyManager/angularjs/delete-old-reports/delete-old-reports.controller.js";
diff --git a/plugins/PrivacyManager/angularjs/anonymize-ip/anonymize-ip.controller.js b/plugins/PrivacyManager/angularjs/anonymize-ip/anonymize-ip.controller.js
deleted file mode 100644
index cc14920c72..0000000000
--- a/plugins/PrivacyManager/angularjs/anonymize-ip/anonymize-ip.controller.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-(function () {
-    angular.module('piwikApp').controller('AnonymizeIpController', AnonymizeIpController);
-
-    AnonymizeIpController.$inject = ['piwikApi'];
-
-    function AnonymizeIpController(piwikApi) {
-        // remember to keep controller very simple. Create a service/factory (model) if needed
-
-        var self = this;
-        this.isLoading = false;
-
-        this.save = function () {
-            this.isLoading = true;
-
-            piwikApi.post({module: 'API', method: 'PrivacyManager.setAnonymizeIpSettings'}, {
-                anonymizeIPEnable: this.enabled ? '1' : '0',
-                anonymizeUserId: this.anonymizeUserId ? '1' : '0',
-                anonymizeOrderId: this.anonymizeOrderId ? '1' : '0',
-                forceCookielessTracking: this.forceCookielessTracking ? '1' : '0',
-                anonymizeReferrer: this.anonymizeReferrer ? this.anonymizeReferrer : '',
-                maskLength: this.maskLength,
-                useAnonymizedIpForVisitEnrichment: parseInt(this.useAnonymizedIpForVisitEnrichment, 10) ? '1' : '0'
-            }).then(function (success) {
-                self.isLoading = false;
-
-                var UI = require('piwik/UI');
-                var notification = new UI.Notification();
-                notification.show(_pk_translate('CoreAdminHome_SettingsSaveSuccess'), {context: 'success', id:'privacyManagerSettings'});
-                notification.scrollToNotification();
-
-            }, function () {
-                self.isLoading = false;
-            });
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/PrivacyManager/templates/privacySettings.twig b/plugins/PrivacyManager/templates/privacySettings.twig
index d3fe58b04c..485935f99b 100644
--- a/plugins/PrivacyManager/templates/privacySettings.twig
+++ b/plugins/PrivacyManager/templates/privacySettings.twig
@@ -15,67 +15,21 @@
 <div piwik-content-block
      id="anonymizeIPAnchor"
      content-title="{{ 'PrivacyManager_UseAnonymizeTrackingData'|translate|e('html_attr') }}">
-    <div piwik-form ng-controller="AnonymizeIpController as anonymizeIp">
-
-        <div piwik-field uicontrol="checkbox" name="anonymizeIpSettings"
-             ng-model="anonymizeIp.enabled"
-             data-title="{{ 'PrivacyManager_UseAnonymizeIp'|translate|e('html_attr') }}"
-             value="{{ anonymizeIP.enabled }}"
-             inline-help="{{ 'PrivacyManager_AnonymizeIpInlineHelp'|translate|e('html_attr') }} {{ 'PrivacyManager_AnonymizeIpDescription'|translate|e('html_attr') }}">
-        </div>
-
-        <div ng-show="anonymizeIp.enabled">
-            <div piwik-field uicontrol="radio" name="maskLength"
-                 ng-model="anonymizeIp.maskLength"
-                 data-title="{{ 'PrivacyManager_AnonymizeIpMaskLengtDescription'|translate|e('html_attr') }}"
-                 value="{{ anonymizeIP.maskLength }}"
-                 options="{{ maskLengthOptions|json_encode }}"
-                 inline-help="{{ 'PrivacyManager_GeolocationAnonymizeIpNote'|translate|e('html_attr') }}">
-            </div>
-
-            <div piwik-field uicontrol="radio" name="useAnonymizedIpForVisitEnrichment"
-                 ng-model="anonymizeIp.useAnonymizedIpForVisitEnrichment"
-                 data-title="{{ 'PrivacyManager_UseAnonymizedIpForVisitEnrichment'|translate|e('html_attr') }}"
-                 value="{% if anonymizeIP.useAnonymizedIpForVisitEnrichment %}1{% else %}0{% endif %}"
-                 options="{{ useAnonymizedIpForVisitEnrichmentOptions|json_encode }}"
-                 inline-help="{{ 'PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote'|translate|e('html_attr') }}">
-            </div>
-        </div>
-
-        <div piwik-field uicontrol="checkbox" name="anonymizeUserId"
-             ng-model="anonymizeIp.anonymizeUserId"
-             data-title="{{ 'PrivacyManager_PseudonymizeUserId'|translate|e('html_attr') }}"
-             value="{{ anonymizeIP.anonymizeUserId }}"
-             inline-help="{{ 'PrivacyManager_PseudonymizeUserIdNote'|translate|e('html_attr') }}<br/><br/><em>{{ 'PrivacyManager_PseudonymizeUserIdNote2'|translate|e('html_attr') }}</em>">
-        </div>
-
-        <div piwik-field uicontrol="checkbox" name="anonymizeOrderId"
-             ng-model="anonymizeIp.anonymizeOrderId"
-             data-title="{{ 'PrivacyManager_UseAnonymizeOrderId'|translate|e('html_attr') }}"
-             value="{{ anonymizeIP.anonymizeOrderId }}"
-             inline-help="{{ 'PrivacyManager_AnonymizeOrderIdNote'|translate|e('html_attr') }}">
-        </div>
-
-        <div piwik-field uicontrol="checkbox" name="forceCookielessTracking"
-             ng-model="anonymizeIp.forceCookielessTracking"
-             data-title="{{ 'PrivacyManager_ForceCookielessTracking'|translate|e('html_attr') }}"
-             value="{{ anonymizeIP.forceCookielessTracking }}"
-             inline-help="{{ 'PrivacyManager_ForceCookielessTrackingDescription'|translate(trackerFileName)|e('html_attr') }}<br/><br/><em>{{ 'PrivacyManager_ForceCookielessTrackingDescription2'|translate|e('html_attr') }}</em>
-                          {%- if not trackerWritable %}
-                                <br /><br /><p class='alert-warning alert'>{{ 'PrivacyManager_ForceCookielessTrackingDescriptionNotWritable'|translate(trackerFileName)|e('html_attr') }}</p>
-                          {% endif -%}">
-        </div>
-
-        <div piwik-field uicontrol="select" name="anonymizeReferrer"
-             ng-model="anonymizeIp.anonymizeReferrer"
-             options='{{ referrerAnonymizationOptions|json_encode|e('html_attr') }}'
-             data-title="{{ 'PrivacyManager_AnonymizeReferrer'|translate|e('html_attr') }}"
-             value="{{ anonymizeIP.anonymizeReferrer }}"
-             inline-help="{{ 'PrivacyManager_AnonymizeReferrerNote'|translate|e('html_attr') }}">
-        </div>
-
-        <div piwik-save-button onconfirm="anonymizeIp.save()" saving="anonymizeIp.isLoading"></div>
-    </div>
+  <div
+    vue-entry="PrivacyManager.AnonymizeIp"
+    anonymize-ip-enabled="{{ anonymizeIP.enabled|default(null)|json_encode|e('html_attr') }}"
+    anonymize-user-id="{{ anonymizeIP.anonymizeUserId|default(null)|json_encode|e('html_attr') }}"
+    mask-length="{{ anonymizeIP.maskLength|default(null)|json_encode|e('html_attr') }}"
+    use-anonymized-ip-for-visit-enrichment="{{ anonymizeIP.useAnonymizedIpForVisitEnrichment|default(null)|json_encode|e('html_attr') }}"
+    anonymize-order-id="{{ anonymizeIP.anonymizeOrderId|default(null)|json_encode|e('html_attr') }}"
+    force-cookieless-tracking="{{ anonymizeIP.forceCookielessTracking|default(null)|json_encode|e('html_attr') }}"
+    anonymize-referrer="{{ anonymizeIP.anonymizeReferrer|default(null)|json_encode|e('html_attr') }}"
+    mask-length-options="{{ maskLengthOptions|default(null)|json_encode|e('html_attr') }}"
+    use-anonymized-ip-for-visit-enrichment-options="{{ useAnonymizedIpForVisitEnrichmentOptions|default(null)|json_encode|e('html_attr') }}"
+    tracker-file-name="{{ trackerFileName|default(null)|json_encode|e('html_attr') }}"
+    tracker-writable="{{ trackerWritable|default(null)|json_encode|e('html_attr') }}"
+    referrer-anonymization-options="{{ referrerAnonymizationOptions|default(null)|json_encode|e('html_attr') }}"
+  ></div>
 </div>
 
 {% if isDataPurgeSettingsEnabled %}
diff --git a/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.js b/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.js
new file mode 100644
index 0000000000..4764628688
--- /dev/null
+++ b/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.js
@@ -0,0 +1,386 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome", , "CorePluginsAdmin"], factory);
+	else if(typeof exports === 'object')
+		exports["PrivacyManager"] = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else
+		root["PrivacyManager"] = factory(root["CoreHome"], root["Vue"], root["CorePluginsAdmin"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__, __WEBPACK_EXTERNAL_MODULE__8bbf__, __WEBPACK_EXTERNAL_MODULE_a5a2__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/PrivacyManager/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "8bbf":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;
+
+/***/ }),
+
+/***/ "a5a2":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_a5a2__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "AnonymizeIp", function() { return /* reexport */ AnonymizeIp; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue?vue&type=template&id=536c794c
+
+
+var _hoisted_1 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_2 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_3 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_5 = {
+  key: 0
+};
+
+var _hoisted_6 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_7 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("br", null, null, -1);
+
+var _hoisted_8 = {
+  class: "alert-warning alert"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Field = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("Field");
+
+  var _component_SaveButton = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("SaveButton");
+
+  var _directive_form = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("form");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "checkbox",
+    name: "anonymizeIpSettings",
+    title: _ctx.translate('PrivacyManager_UseAnonymizeIp'),
+    modelValue: _ctx.actualEnabled,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.actualEnabled = $event;
+    }),
+    "inline-help": _ctx.anonymizeIpEnabledHelp
+  }, null, 8, ["title", "modelValue", "inline-help"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "radio",
+    name: "maskLength",
+    title: _ctx.translate('PrivacyManager_AnonymizeIpMaskLengtDescription'),
+    modelValue: _ctx.actualMaskLength,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.actualMaskLength = $event;
+    }),
+    options: _ctx.maskLengthOptions,
+    "inline-help": _ctx.translate('PrivacyManager_GeolocationAnonymizeIpNote')
+  }, null, 8, ["title", "modelValue", "options", "inline-help"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "radio",
+    name: "useAnonymizedIpForVisitEnrichment",
+    title: _ctx.translate('PrivacyManager_UseAnonymizedIpForVisitEnrichment'),
+    modelValue: _ctx.actualUseAnonymizedIpForVisitEnrichment,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.actualUseAnonymizedIpForVisitEnrichment = $event;
+    }),
+    options: _ctx.useAnonymizedIpForVisitEnrichmentOptions,
+    "inline-help": _ctx.translate('PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote')
+  }, null, 8, ["title", "modelValue", "options", "inline-help"])])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.actualEnabled]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "checkbox",
+    name: "anonymizeUserId",
+    title: _ctx.translate('PrivacyManager_PseudonymizeUserId'),
+    modelValue: _ctx.actualAnonymizeUserId,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.actualAnonymizeUserId = $event;
+    })
+  }, {
+    "inline-help": Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('PrivacyManager_PseudonymizeUserIdNote')) + " ", 1), _hoisted_1, _hoisted_2, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("em", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('PrivacyManager_PseudonymizeUserIdNote2')), 1)];
+    }),
+    _: 1
+  }, 8, ["title", "modelValue"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "checkbox",
+    name: "anonymizeOrderId",
+    title: _ctx.translate('PrivacyManager_UseAnonymizeOrderId'),
+    modelValue: _ctx.actualAnonymizeOrderId,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.actualAnonymizeOrderId = $event;
+    }),
+    "inline-help": _ctx.translate('PrivacyManager_AnonymizeOrderIdNote')
+  }, null, 8, ["title", "modelValue", "inline-help"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "checkbox",
+    name: "forceCookielessTracking",
+    title: _ctx.translate('PrivacyManager_ForceCookielessTracking'),
+    modelValue: _ctx.actualForceCookielessTracking,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.actualForceCookielessTracking = $event;
+    })
+  }, {
+    "inline-help": Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('PrivacyManager_ForceCookielessTrackingDescription', _ctx.trackerFileName)) + " ", 1), _hoisted_3, _hoisted_4, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("em", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('PrivacyManager_ForceCookielessTrackingDescription2')), 1), !_ctx.trackerWritable ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("span", _hoisted_5, [_hoisted_6, _hoisted_7, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("p", _hoisted_8, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('PrivacyManager_ForceCookielessTrackingDescriptionNotWritable', _ctx.trackerFileName)), 1)])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)];
+    }),
+    _: 1
+  }, 8, ["title", "modelValue"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "select",
+    name: "anonymizeReferrer",
+    title: _ctx.translate('PrivacyManager_AnonymizeReferrer'),
+    modelValue: _ctx.actualAnonymizeReferrer,
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
+      return _ctx.actualAnonymizeReferrer = $event;
+    }),
+    options: _ctx.referrerAnonymizationOptions,
+    "inline-help": _ctx.translate('PrivacyManager_AnonymizeReferrerNote')
+  }, null, 8, ["title", "modelValue", "options", "inline-help"])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    onConfirm: _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.save();
+    }),
+    saving: _ctx.isLoading
+  }, null, 8, ["saving"])], 512)), [[_directive_form]]);
+}
+// CONCATENATED MODULE: ./plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue?vue&type=template&id=536c794c
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// EXTERNAL MODULE: external "CorePluginsAdmin"
+var external_CorePluginsAdmin_ = __webpack_require__("a5a2");
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue?vue&type=script&lang=ts
+
+
+
+/* harmony default export */ var AnonymizeIpvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    anonymizeIpEnabled: Boolean,
+    anonymizeUserId: Boolean,
+    maskLength: {
+      type: Number,
+      required: true
+    },
+    useAnonymizedIpForVisitEnrichment: Boolean,
+    anonymizeOrderId: Boolean,
+    forceCookielessTracking: Boolean,
+    anonymizeReferrer: String,
+    maskLengthOptions: {
+      type: Array,
+      required: true
+    },
+    useAnonymizedIpForVisitEnrichmentOptions: {
+      type: Array,
+      required: true
+    },
+    trackerFileName: {
+      type: String,
+      required: true
+    },
+    trackerWritable: {
+      type: Boolean,
+      required: true
+    },
+    referrerAnonymizationOptions: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"]
+  },
+  directives: {
+    Form: external_CorePluginsAdmin_["Form"]
+  },
+  data: function data() {
+    return {
+      isLoading: false,
+      actualEnabled: !!this.anonymizeIpEnabled,
+      actualMaskLength: this.maskLength,
+      actualUseAnonymizedIpForVisitEnrichment: this.useAnonymizedIpForVisitEnrichment ? '1' : '0',
+      actualAnonymizeUserId: !!this.anonymizeUserId,
+      actualAnonymizeOrderId: !!this.anonymizeOrderId,
+      actualForceCookielessTracking: !!this.forceCookielessTracking,
+      actualAnonymizeReferrer: this.anonymizeReferrer
+    };
+  },
+  methods: {
+    save: function save() {
+      var _this = this;
+
+      this.isLoading = true;
+      external_CoreHome_["AjaxHelper"].post({
+        module: 'API',
+        method: 'PrivacyManager.setAnonymizeIpSettings'
+      }, {
+        anonymizeIPEnable: this.actualEnabled ? '1' : '0',
+        anonymizeUserId: this.actualAnonymizeUserId ? '1' : '0',
+        anonymizeOrderId: this.actualAnonymizeOrderId ? '1' : '0',
+        forceCookielessTracking: this.actualForceCookielessTracking ? '1' : '0',
+        anonymizeReferrer: this.actualAnonymizeReferrer ? this.actualAnonymizeReferrer : '',
+        maskLength: this.actualMaskLength,
+        useAnonymizedIpForVisitEnrichment: this.actualUseAnonymizedIpForVisitEnrichment ? '1' : '0'
+      }).then(function () {
+        var notificationInstanceId = external_CoreHome_["NotificationsStore"].show({
+          message: Object(external_CoreHome_["translate"])('CoreAdminHome_SettingsSaveSuccess'),
+          context: 'success',
+          id: 'privacyManagerSettings',
+          type: 'toast'
+        });
+        external_CoreHome_["NotificationsStore"].scrollToNotification(notificationInstanceId);
+      }).finally(function () {
+        _this.isLoading = false;
+      });
+    }
+  },
+  computed: {
+    anonymizeIpEnabledHelp: function anonymizeIpEnabledHelp() {
+      var inlineHelp1 = Object(external_CoreHome_["translate"])('PrivacyManager_AnonymizeIpInlineHelp');
+      var inlineHelp2 = Object(external_CoreHome_["translate"])('PrivacyManager_AnonymizeIpDescription');
+      return "".concat(inlineHelp1, " ").concat(inlineHelp2);
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue
+
+
+
+AnonymizeIpvue_type_script_lang_ts.render = render
+
+/* harmony default export */ var AnonymizeIp = (AnonymizeIpvue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/PrivacyManager/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=PrivacyManager.umd.js.map
\ No newline at end of file
diff --git a/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.min.js b/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.min.js
new file mode 100644
index 0000000000..18a2654674
--- /dev/null
+++ b/plugins/PrivacyManager/vue/dist/PrivacyManager.umd.min.js
@@ -0,0 +1,8 @@
+(function(e,n){"object"===typeof exports&&"object"===typeof module?module.exports=n(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],n):"object"===typeof exports?exports["PrivacyManager"]=n(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["PrivacyManager"]=n(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,n,t){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)t.d(r,i,function(n){return e[n]}.bind(null,i));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e["default"]}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="plugins/PrivacyManager/vue/dist/",t(t.s="fae3")}({"19dc":function(n,t){n.exports=e},"8bbf":function(e,t){e.exports=n},a5a2:function(e,n){e.exports=t},fae3:function(e,n,t){"use strict";if(t.r(n),t.d(n,"AnonymizeIp",(function(){return O})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(t.p=i[1])}var o=t("8bbf"),a=Object(o["createElementVNode"])("br",null,null,-1),l=Object(o["createElementVNode"])("br",null,null,-1),c=Object(o["createElementVNode"])("br",null,null,-1),u=Object(o["createElementVNode"])("br",null,null,-1),s={key:0},d=Object(o["createElementVNode"])("br",null,null,-1),m=Object(o["createElementVNode"])("br",null,null,-1),p={class:"alert-warning alert"};function y(e,n,t,r,i,y){var b=Object(o["resolveComponent"])("Field"),f=Object(o["resolveComponent"])("SaveButton"),g=Object(o["resolveDirective"])("form");return Object(o["withDirectives"])((Object(o["openBlock"])(),Object(o["createElementBlock"])("div",null,[Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"checkbox",name:"anonymizeIpSettings",title:e.translate("PrivacyManager_UseAnonymizeIp"),modelValue:e.actualEnabled,"onUpdate:modelValue":n[0]||(n[0]=function(n){return e.actualEnabled=n}),"inline-help":e.anonymizeIpEnabledHelp},null,8,["title","modelValue","inline-help"])]),Object(o["withDirectives"])(Object(o["createElementVNode"])("div",null,[Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"radio",name:"maskLength",title:e.translate("PrivacyManager_AnonymizeIpMaskLengtDescription"),modelValue:e.actualMaskLength,"onUpdate:modelValue":n[1]||(n[1]=function(n){return e.actualMaskLength=n}),options:e.maskLengthOptions,"inline-help":e.translate("PrivacyManager_GeolocationAnonymizeIpNote")},null,8,["title","modelValue","options","inline-help"])]),Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"radio",name:"useAnonymizedIpForVisitEnrichment",title:e.translate("PrivacyManager_UseAnonymizedIpForVisitEnrichment"),modelValue:e.actualUseAnonymizedIpForVisitEnrichment,"onUpdate:modelValue":n[2]||(n[2]=function(n){return e.actualUseAnonymizedIpForVisitEnrichment=n}),options:e.useAnonymizedIpForVisitEnrichmentOptions,"inline-help":e.translate("PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote")},null,8,["title","modelValue","options","inline-help"])])],512),[[o["vShow"],e.actualEnabled]]),Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"checkbox",name:"anonymizeUserId",title:e.translate("PrivacyManager_PseudonymizeUserId"),modelValue:e.actualAnonymizeUserId,"onUpdate:modelValue":n[3]||(n[3]=function(n){return e.actualAnonymizeUserId=n})},{"inline-help":Object(o["withCtx"])((function(){return[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("PrivacyManager_PseudonymizeUserIdNote"))+" ",1),a,l,Object(o["createElementVNode"])("em",null,Object(o["toDisplayString"])(e.translate("PrivacyManager_PseudonymizeUserIdNote2")),1)]})),_:1},8,["title","modelValue"])]),Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"checkbox",name:"anonymizeOrderId",title:e.translate("PrivacyManager_UseAnonymizeOrderId"),modelValue:e.actualAnonymizeOrderId,"onUpdate:modelValue":n[4]||(n[4]=function(n){return e.actualAnonymizeOrderId=n}),"inline-help":e.translate("PrivacyManager_AnonymizeOrderIdNote")},null,8,["title","modelValue","inline-help"])]),Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"checkbox",name:"forceCookielessTracking",title:e.translate("PrivacyManager_ForceCookielessTracking"),modelValue:e.actualForceCookielessTracking,"onUpdate:modelValue":n[5]||(n[5]=function(n){return e.actualForceCookielessTracking=n})},{"inline-help":Object(o["withCtx"])((function(){return[Object(o["createTextVNode"])(Object(o["toDisplayString"])(e.translate("PrivacyManager_ForceCookielessTrackingDescription",e.trackerFileName))+" ",1),c,u,Object(o["createElementVNode"])("em",null,Object(o["toDisplayString"])(e.translate("PrivacyManager_ForceCookielessTrackingDescription2")),1),e.trackerWritable?Object(o["createCommentVNode"])("",!0):(Object(o["openBlock"])(),Object(o["createElementBlock"])("span",s,[d,m,Object(o["createElementVNode"])("p",p,Object(o["toDisplayString"])(e.translate("PrivacyManager_ForceCookielessTrackingDescriptionNotWritable",e.trackerFileName)),1)]))]})),_:1},8,["title","modelValue"])]),Object(o["createElementVNode"])("div",null,[Object(o["createVNode"])(b,{uicontrol:"select",name:"anonymizeReferrer",title:e.translate("PrivacyManager_AnonymizeReferrer"),modelValue:e.actualAnonymizeReferrer,"onUpdate:modelValue":n[6]||(n[6]=function(n){return e.actualAnonymizeReferrer=n}),options:e.referrerAnonymizationOptions,"inline-help":e.translate("PrivacyManager_AnonymizeReferrerNote")},null,8,["title","modelValue","options","inline-help"])]),Object(o["createVNode"])(f,{onConfirm:n[7]||(n[7]=function(n){return e.save()}),saving:e.isLoading},null,8,["saving"])],512)),[[g]])}var b=t("19dc"),f=t("a5a2"),g=Object(o["defineComponent"])({props:{anonymizeIpEnabled:Boolean,anonymizeUserId:Boolean,maskLength:{type:Number,required:!0},useAnonymizedIpForVisitEnrichment:Boolean,anonymizeOrderId:Boolean,forceCookielessTracking:Boolean,anonymizeReferrer:String,maskLengthOptions:{type:Array,required:!0},useAnonymizedIpForVisitEnrichmentOptions:{type:Array,required:!0},trackerFileName:{type:String,required:!0},trackerWritable:{type:Boolean,required:!0},referrerAnonymizationOptions:{type:Object,required:!0}},components:{Field:f["Field"],SaveButton:f["SaveButton"]},directives:{Form:f["Form"]},data:function(){return{isLoading:!1,actualEnabled:!!this.anonymizeIpEnabled,actualMaskLength:this.maskLength,actualUseAnonymizedIpForVisitEnrichment:this.useAnonymizedIpForVisitEnrichment?"1":"0",actualAnonymizeUserId:!!this.anonymizeUserId,actualAnonymizeOrderId:!!this.anonymizeOrderId,actualForceCookielessTracking:!!this.forceCookielessTracking,actualAnonymizeReferrer:this.anonymizeReferrer}},methods:{save:function(){var e=this;this.isLoading=!0,b["AjaxHelper"].post({module:"API",method:"PrivacyManager.setAnonymizeIpSettings"},{anonymizeIPEnable:this.actualEnabled?"1":"0",anonymizeUserId:this.actualAnonymizeUserId?"1":"0",anonymizeOrderId:this.actualAnonymizeOrderId?"1":"0",forceCookielessTracking:this.actualForceCookielessTracking?"1":"0",anonymizeReferrer:this.actualAnonymizeReferrer?this.actualAnonymizeReferrer:"",maskLength:this.actualMaskLength,useAnonymizedIpForVisitEnrichment:this.actualUseAnonymizedIpForVisitEnrichment?"1":"0"}).then((function(){var e=b["NotificationsStore"].show({message:Object(b["translate"])("CoreAdminHome_SettingsSaveSuccess"),context:"success",id:"privacyManagerSettings",type:"toast"});b["NotificationsStore"].scrollToNotification(e)})).finally((function(){e.isLoading=!1}))}},computed:{anonymizeIpEnabledHelp:function(){var e=Object(b["translate"])("PrivacyManager_AnonymizeIpInlineHelp"),n=Object(b["translate"])("PrivacyManager_AnonymizeIpDescription");return"".concat(e," ").concat(n)}}});g.render=y;var O=g;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */}})}));
+//# sourceMappingURL=PrivacyManager.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/PrivacyManager/vue/dist/umd.metadata.json b/plugins/PrivacyManager/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..dce4477a3c
--- /dev/null
+++ b/plugins/PrivacyManager/vue/dist/umd.metadata.json
@@ -0,0 +1,6 @@
+{
+  "dependsOn": [
+    "CoreHome",
+    "CorePluginsAdmin"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue b/plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue
new file mode 100644
index 0000000000..c73ddb6546
--- /dev/null
+++ b/plugins/PrivacyManager/vue/src/AnonymizeIp/AnonymizeIp.vue
@@ -0,0 +1,213 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div v-form>
+    <div>
+      <Field
+        uicontrol="checkbox"
+        name="anonymizeIpSettings"
+        :title="translate('PrivacyManager_UseAnonymizeIp')"
+        v-model="actualEnabled"
+        :inline-help="anonymizeIpEnabledHelp"
+      >
+      </Field>
+    </div>
+    <div v-show="actualEnabled">
+      <div>
+        <Field
+          uicontrol="radio"
+          name="maskLength"
+          :title="translate('PrivacyManager_AnonymizeIpMaskLengtDescription')"
+          v-model="actualMaskLength"
+          :options="maskLengthOptions"
+          :inline-help="translate('PrivacyManager_GeolocationAnonymizeIpNote')"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="radio"
+          name="useAnonymizedIpForVisitEnrichment"
+          :title="translate('PrivacyManager_UseAnonymizedIpForVisitEnrichment')"
+          v-model="actualUseAnonymizedIpForVisitEnrichment"
+          :options="useAnonymizedIpForVisitEnrichmentOptions"
+          :inline-help="translate('PrivacyManager_UseAnonymizedIpForVisitEnrichmentNote')"
+        >
+        </Field>
+      </div>
+    </div>
+    <div>
+      <Field
+        uicontrol="checkbox"
+        name="anonymizeUserId"
+        :title="translate('PrivacyManager_PseudonymizeUserId')"
+        v-model="actualAnonymizeUserId"
+      >
+        <template v-slot:inline-help>
+          {{ translate('PrivacyManager_PseudonymizeUserIdNote') }}
+          <br/><br/>
+          <em>{{ translate('PrivacyManager_PseudonymizeUserIdNote2') }}</em>
+        </template>
+      </Field>
+    </div>
+    <div>
+      <Field
+        uicontrol="checkbox"
+        name="anonymizeOrderId"
+        :title="translate('PrivacyManager_UseAnonymizeOrderId')"
+        v-model="actualAnonymizeOrderId"
+        :inline-help="translate('PrivacyManager_AnonymizeOrderIdNote')"
+      >
+      </Field>
+    </div>
+    <div>
+      <Field
+        uicontrol="checkbox"
+        name="forceCookielessTracking"
+        :title="translate('PrivacyManager_ForceCookielessTracking')"
+        v-model="actualForceCookielessTracking"
+      >
+        <template v-slot:inline-help>
+          {{ translate('PrivacyManager_ForceCookielessTrackingDescription', trackerFileName) }}
+          <br/><br/><em>{{ translate('PrivacyManager_ForceCookielessTrackingDescription2') }}</em>
+          <span v-if="!trackerWritable">
+            <br /><br />
+            <p class='alert-warning alert'>
+              {{ translate(
+                'PrivacyManager_ForceCookielessTrackingDescriptionNotWritable',
+                trackerFileName,
+              ) }}
+            </p>
+          </span>
+        </template>
+      </Field>
+    </div>
+    <div>
+      <Field
+        uicontrol="select"
+        name="anonymizeReferrer"
+        :title="translate('PrivacyManager_AnonymizeReferrer')"
+        v-model="actualAnonymizeReferrer"
+        :options="referrerAnonymizationOptions"
+        :inline-help="translate('PrivacyManager_AnonymizeReferrerNote')"
+      >
+      </Field>
+    </div>
+    <SaveButton
+      @confirm="save()"
+      :saving="isLoading"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { translate, AjaxHelper, NotificationsStore } from 'CoreHome';
+import { Form, Field, SaveButton } from 'CorePluginsAdmin';
+
+interface AnonymizeIpState {
+  isLoading: boolean;
+  actualEnabled: boolean;
+  actualMaskLength: number;
+  actualUseAnonymizedIpForVisitEnrichment: string;
+  actualAnonymizeUserId: boolean;
+  actualAnonymizeOrderId: boolean;
+  actualForceCookielessTracking: boolean;
+  actualAnonymizeReferrer?: string;
+}
+
+export default defineComponent({
+  props: {
+    anonymizeIpEnabled: Boolean,
+    anonymizeUserId: Boolean,
+    maskLength: {
+      type: Number,
+      required: true,
+    },
+    useAnonymizedIpForVisitEnrichment: Boolean,
+    anonymizeOrderId: Boolean,
+    forceCookielessTracking: Boolean,
+    anonymizeReferrer: String,
+    maskLengthOptions: {
+      type: Array,
+      required: true,
+    },
+    useAnonymizedIpForVisitEnrichmentOptions: {
+      type: Array,
+      required: true,
+    },
+    trackerFileName: {
+      type: String,
+      required: true,
+    },
+    trackerWritable: {
+      type: Boolean,
+      required: true,
+    },
+    referrerAnonymizationOptions: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    Field,
+    SaveButton,
+  },
+  directives: {
+    Form,
+  },
+  data(): AnonymizeIpState {
+    return {
+      isLoading: false,
+      actualEnabled: !!this.anonymizeIpEnabled,
+      actualMaskLength: this.maskLength,
+      actualUseAnonymizedIpForVisitEnrichment: this.useAnonymizedIpForVisitEnrichment ? '1' : '0',
+      actualAnonymizeUserId: !!this.anonymizeUserId,
+      actualAnonymizeOrderId: !!this.anonymizeOrderId,
+      actualForceCookielessTracking: !!this.forceCookielessTracking,
+      actualAnonymizeReferrer: this.anonymizeReferrer,
+    };
+  },
+  methods: {
+    save() {
+      this.isLoading = true;
+      AjaxHelper.post(
+        {
+          module: 'API',
+          method: 'PrivacyManager.setAnonymizeIpSettings',
+        },
+        {
+          anonymizeIPEnable: this.actualEnabled ? '1' : '0',
+          anonymizeUserId: this.actualAnonymizeUserId ? '1' : '0',
+          anonymizeOrderId: this.actualAnonymizeOrderId ? '1' : '0',
+          forceCookielessTracking: this.actualForceCookielessTracking ? '1' : '0',
+          anonymizeReferrer: this.actualAnonymizeReferrer ? this.actualAnonymizeReferrer : '',
+          maskLength: this.actualMaskLength,
+          useAnonymizedIpForVisitEnrichment: this.actualUseAnonymizedIpForVisitEnrichment ? '1' : '0',
+        },
+      ).then(() => {
+        const notificationInstanceId = NotificationsStore.show({
+          message: translate('CoreAdminHome_SettingsSaveSuccess'),
+          context: 'success',
+          id: 'privacyManagerSettings',
+          type: 'toast',
+        });
+        NotificationsStore.scrollToNotification(notificationInstanceId);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    },
+  },
+  computed: {
+    anonymizeIpEnabledHelp() {
+      const inlineHelp1 = translate('PrivacyManager_AnonymizeIpInlineHelp');
+      const inlineHelp2 = translate('PrivacyManager_AnonymizeIpDescription');
+      return `${inlineHelp1} ${inlineHelp2}`;
+    },
+  },
+});
+</script>
diff --git a/plugins/PrivacyManager/vue/src/index.ts b/plugins/PrivacyManager/vue/src/index.ts
new file mode 100644
index 0000000000..61ccffc41e
--- /dev/null
+++ b/plugins/PrivacyManager/vue/src/index.ts
@@ -0,0 +1,8 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+export { default as AnonymizeIp } from './AnonymizeIp/AnonymizeIp.vue';