[Vue] migrate campaign builder directive to vue (#19004)

* migrate campaign builder directive to vue

* fix angularjs/vue binding combinations

* fix spacing and make sure adapter is exported

* fix variable reference

* fix reset of generated URL

* update expected screenshots

* fix ui test

* update expected screenshots

Co-authored-by: sgiehl <stefan@matomo.org>

21 files changed, 773 insertions, 241 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js
index 159fd85716..f96639c60f 100644
--- a/plugins/CoreHome/vue/dist/CoreHome.umd.js
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js
@@ -9633,33 +9633,33 @@ window.angular.module('piwikApp.service').factory('reportMetadataModel', functio
     }
   };
 });
-// 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/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue?vue&type=template&id=5df0ba73
+// 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/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue?vue&type=template&id=4261d57b
 
-var WidgetLoadervue_type_template_id_5df0ba73_hoisted_1 = {
+var WidgetLoadervue_type_template_id_4261d57b_hoisted_1 = {
   key: 0
 };
-var WidgetLoadervue_type_template_id_5df0ba73_hoisted_2 = {
+var WidgetLoadervue_type_template_id_4261d57b_hoisted_2 = {
   class: "notification system notification-error"
 };
-var WidgetLoadervue_type_template_id_5df0ba73_hoisted_3 = {
+var WidgetLoadervue_type_template_id_4261d57b_hoisted_3 = {
   key: 0,
   rel: "noreferrer noopener",
   target: "_blank",
   href: "https://matomo.org/faq/troubleshooting/faq_19489/"
 };
-var WidgetLoadervue_type_template_id_5df0ba73_hoisted_4 = {
+var WidgetLoadervue_type_template_id_4261d57b_hoisted_4 = {
   class: "theWidgetContent",
   ref: "widgetContent"
 };
-function WidgetLoadervue_type_template_id_5df0ba73_render(_ctx, _cache, $props, $setup, $data, $options) {
+function WidgetLoadervue_type_template_id_4261d57b_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ActivityIndicator = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ActivityIndicator");
 
   return 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_["createVNode"])(_component_ActivityIndicator, {
     "loading-message": _ctx.loadingMessage,
     loading: _ctx.loading
-  }, null, 8, ["loading-message", "loading"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_ctx.widgetName ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("h2", WidgetLoadervue_type_template_id_5df0ba73_hoisted_1, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.widgetName), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", WidgetLoadervue_type_template_id_5df0ba73_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ErrorRequest', '', '')) + " ", 1), _ctx.hasErrorFaqLink ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("a", WidgetLoadervue_type_template_id_5df0ba73_hoisted_3, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ErrorRequestFaqLink')), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.loadingFailed]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", WidgetLoadervue_type_template_id_5df0ba73_hoisted_4, null, 512)]);
+  }, null, 8, ["loading-message", "loading"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [_ctx.widgetName ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("h2", WidgetLoadervue_type_template_id_4261d57b_hoisted_1, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.widgetName), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", WidgetLoadervue_type_template_id_4261d57b_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ErrorRequest', '', '')) + " ", 1), _ctx.hasErrorFaqLink ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("a", WidgetLoadervue_type_template_id_4261d57b_hoisted_3, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('General_ErrorRequestFaqLink')), 1)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.loadingFailed]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", WidgetLoadervue_type_template_id_4261d57b_hoisted_4, null, 512)]);
 }
-// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue?vue&type=template&id=5df0ba73
+// CONCATENATED MODULE: ./plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue?vue&type=template&id=4261d57b
 
 // 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/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue?vue&type=script&lang=ts
 
@@ -9832,7 +9832,9 @@ function WidgetLoadervue_type_template_id_5df0ba73_render(_ctx, _cache, $props,
 
         var $rootScope = Matomo_Matomo.helper.getAngularDependency('$rootScope');
         var scope = $rootScope.$new();
-        _this.currentScope = scope;
+        _this.currentScope = scope; // compile angularjs first since it will modify all dom nodes, breaking vue bindings
+        // if they are present
+
         Matomo_Matomo.helper.compileAngularComponents($content, {
           scope: scope
         });
@@ -9871,7 +9873,7 @@ function WidgetLoadervue_type_template_id_5df0ba73_render(_ctx, _cache, $props,
 
 
 
-WidgetLoadervue_type_script_lang_ts.render = WidgetLoadervue_type_template_id_5df0ba73_render
+WidgetLoadervue_type_script_lang_ts.render = WidgetLoadervue_type_template_id_4261d57b_render
 
 /* harmony default export */ var WidgetLoader = (WidgetLoadervue_type_script_lang_ts);
 // CONCATENATED MODULE: ./plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.adapter.ts
diff --git a/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue b/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
index 9e4ac6b239..76548ccc26 100644
--- a/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
+++ b/plugins/CoreHome/vue/src/WidgetLoader/WidgetLoader.vue
@@ -219,6 +219,8 @@ export default defineComponent({
         const scope = $rootScope.$new();
         this.currentScope = scope;
 
+        // compile angularjs first since it will modify all dom nodes, breaking vue bindings
+        // if they are present
         Matomo.helper.compileAngularComponents($content, { scope });
         Matomo.helper.compileVueEntryComponents($content);
 
diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index b80c550df0..ca83ba9cb0 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -188,6 +188,8 @@ window.piwikHelper = {
           throw new Error('Unknown component in vue-entry: ' + entry);
         }
 
+        $(this).attr('ng-non-bindable', '');
+
         var paramsStr = '';
 
         var componentParams = {};
diff --git a/plugins/Referrers/Referrers.php b/plugins/Referrers/Referrers.php
index 68880c5266..4e43b44c52 100644
--- a/plugins/Referrers/Referrers.php
+++ b/plugins/Referrers/Referrers.php
@@ -69,7 +69,7 @@ class Referrers extends \Piwik\Plugin
 
     public function getStylesheetFiles(&$stylesheets)
     {
-        $stylesheets[] = 'plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.less';
+        $stylesheets[] = 'plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.less';
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)
@@ -101,8 +101,6 @@ class Referrers extends \Piwik\Plugin
 
     public function getJsFiles(&$jsFiles)
     {
-        $jsFiles[] = 'plugins/Referrers/angularjs/campaign-builder/campaign-builder.controller.js';
-        $jsFiles[] = 'plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.js';
     }
 
     public function setTrackerCacheGeneral(&$cacheContent)
diff --git a/plugins/Referrers/Widgets/GetCampaignUrlBuilder.php b/plugins/Referrers/Widgets/GetCampaignUrlBuilder.php
index 434f130c3d..4a978da15a 100644
--- a/plugins/Referrers/Widgets/GetCampaignUrlBuilder.php
+++ b/plugins/Referrers/Widgets/GetCampaignUrlBuilder.php
@@ -40,7 +40,7 @@ class GetCampaignUrlBuilder extends \Piwik\Widget\Widget
         $hasExtraPlugin = Plugin\Manager::getInstance()->isPluginActivated('MarketingCampaignsReporting');
 
         return $this->renderTemplate('campaignBuilder', array(
-            'hasExtraPlugin' => (int)$hasExtraPlugin
+            'hasExtraPlugin' => $hasExtraPlugin,
         ));
     }
 
diff --git a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.controller.js b/plugins/Referrers/angularjs/campaign-builder/campaign-builder.controller.js
deleted file mode 100644
index db2e514595..0000000000
--- a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.controller.js
+++ /dev/null
@@ -1,91 +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('CampaignBuilderController', CampaignBuilderController);
-
-    CampaignBuilderController.$inject = ['$scope'];
-
-    function CampaignBuilderController($scope) {
-        this.hasExtraPlugin = $scope.hasExtraPlugin;
-
-        this.reset = function () {
-            this.websiteUrl = '';
-            this.campaignName = '';
-            this.campaignKeyword = '';
-            this.campaignSource = '';
-            this.campaignMedium = '';
-            this.campaignId = '';
-            this.campaignContent = '';
-            this.campaignGroup = '';
-            this.campaignPlacement = '';
-            this.generatedUrl = '';
-        };
-
-        this.generateUrl = function () {
-            this.generatedUrl = String(this.websiteUrl);
-
-            if (this.generatedUrl.indexOf('http') !== 0) {
-                this.generatedUrl = 'https://' + this.generatedUrl.trim();
-            }
-
-            var urlHashPos = this.generatedUrl.indexOf('#');
-            var urlHash = '';
-            if (urlHashPos >= 0) {
-                urlHash = this.generatedUrl.substr(urlHashPos);
-                this.generatedUrl = this.generatedUrl.substr(0, urlHashPos);
-            }
-
-            if (this.generatedUrl.indexOf('/', 10) < 0 && this.generatedUrl.indexOf("?") < 0) {
-                this.generatedUrl += '/';
-            }
-
-            var campaignName = encodeURIComponent(this.campaignName.trim());
-
-            if (this.generatedUrl.indexOf('?') > 0 || this.generatedUrl.indexOf('#') > 0) {
-                this.generatedUrl += '&';
-            } else {
-                this.generatedUrl += '?';
-            }
-
-            this.generatedUrl += 'mtm_campaign='+campaignName;
-
-            if (this.campaignKeyword) {
-                this.generatedUrl += '&mtm_kwd='+encodeURIComponent(this.campaignKeyword.trim());
-            }
-
-            if (this.campaignSource) {
-                this.generatedUrl += '&mtm_source='+encodeURIComponent(this.campaignSource.trim());
-            }
-
-            if (this.campaignMedium) {
-                this.generatedUrl += '&mtm_medium='+encodeURIComponent(this.campaignMedium.trim());
-            }
-
-            if (this.campaignContent) {
-                this.generatedUrl += '&mtm_content='+encodeURIComponent(this.campaignContent.trim());
-            }
-
-            if (this.campaignId) {
-                this.generatedUrl += '&mtm_cid='+encodeURIComponent(this.campaignId.trim());
-            }
-
-            if (this.campaignGroup) {
-                this.generatedUrl += '&mtm_group='+encodeURIComponent(this.campaignGroup.trim());
-            }
-
-            if (this.campaignPlacement) {
-                this.generatedUrl += '&mtm_placement='+encodeURIComponent(this.campaignPlacement.trim());
-            }
-
-            this.generatedUrl += urlHash;
-
-            $('#urlCampaignBuilderResult').effect("highlight", {}, 1500);
-        };
-
-        this.reset();
-    }
-})();
diff --git a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.html b/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.html
deleted file mode 100644
index 9dade113d6..0000000000
--- a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<div class="campaignUrlBuilder">
-
-    <form>
-        <div piwik-field uicontrol="text" name="websiteurl"
-             data-title="{{'Actions_ColumnPageURL'|translate}} ({{ 'General_Required2'|translate }})"
-             ng-model="campaignBuilder.websiteUrl"
-             inline-help="{{'Referrers_CampaignPageUrlHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignname"
-             data-title="{{ 'CoreAdminHome_JSTracking_CampaignNameParam'|translate }} ({{ 'General_Required2'|translate }})"
-             ng-model="campaignBuilder.campaignName"
-             inline-help="{{'Referrers_CampaignNameHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignkeyword"
-             data-title="{{ 'CoreAdminHome_JSTracking_CampaignKwdParam'|translate }}"
-             ng-model="campaignBuilder.campaignKeyword"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignKeywordHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignsource"
-             data-title="{{ 'Referrers_CampaignSource'|translate }}"
-             ng-model="campaignBuilder.campaignSource"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignSourceHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignmedium"
-             data-title="{{ 'Referrers_CampaignMedium'|translate }}"
-             ng-model="campaignBuilder.campaignMedium"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignMediumHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaigncontent"
-             data-title="{{ 'Referrers_CampaignContent'|translate }}"
-             ng-model="campaignBuilder.campaignContent"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignContentHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignid"
-             data-title="{{ 'Referrers_CampaignId'|translate }}"
-             ng-model="campaignBuilder.campaignId"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignIdHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaigngroup"
-             data-title="{{ 'Referrers_CampaignGroup'|translate }}"
-             ng-model="campaignBuilder.campaignGroup"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignGroupHelp'|translate}}">
-        </div>
-
-        <div piwik-field uicontrol="text" name="campaignplacement"
-             data-title="{{ 'Referrers_CampaignPlacement'|translate }}"
-             ng-model="campaignBuilder.campaignPlacement"
-             ng-show="campaignBuilder.hasExtraPlugin"
-             inline-help="{{'Goals_Optional'|translate}} {{'Referrers_CampaignPlacementHelp'|translate}}">
-        </div>
-
-        <div piwik-save-button
-             class="generateCampaignUrl"
-             onconfirm="campaignBuilder.generateUrl()"
-             data-disabled="!campaignBuilder.websiteUrl || !campaignBuilder.campaignName"
-             value="{{ 'Referrers_GenerateUrl'|translate }}">
-        </div>
-        <div piwik-save-button
-             class="resetCampaignUrl"
-             onconfirm="campaignBuilder.reset()"
-             value="{{ 'General_Clear'|translate }}">
-        </div>
-
-        <div ng-show="campaignBuilder.generatedUrl">
-            <h3>{{'Referrers_URLCampaignBuilderResult'|translate}}</h3>
-            <pre piwik-select-on-focus id="urlCampaignBuilderResult"><code ng-bind="campaignBuilder.generatedUrl"></code></pre>
-        </div>
-    </form>
-</div>
\ No newline at end of file
diff --git a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.js b/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.js
deleted file mode 100644
index a14fbd33da..0000000000
--- a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.js
+++ /dev/null
@@ -1,44 +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
- */
-
-/**
- * Usage:
- * <div matomo-campaign-builder>
- */
-(function () {
-    angular.module('piwikApp').directive('matomoCampaignBuilder', matomoCampaignBuilder);
-
-    matomoCampaignBuilder.$inject = ['piwik'];
-
-    function matomoCampaignBuilder(piwik){
-        var defaults = {
-            hasExtraPlugin: true
-        };
-
-        return {
-            restrict: 'A',
-            scope: {
-               hasExtraPlugin: '<'
-            },
-            templateUrl: 'plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.html?cb=' + piwik.cacheBuster,
-            controller: 'CampaignBuilderController',
-            controllerAs: 'campaignBuilder',
-            compile: function (element, attrs) {
-
-                for (var index in defaults) {
-                    if (defaults.hasOwnProperty(index) && attrs[index] === undefined) {
-                        attrs[index] = defaults[index];
-                    }
-                }
-
-                return function (scope, element, attrs) {
-
-                };
-            }
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Referrers/templates/campaignBuilder.twig b/plugins/Referrers/templates/campaignBuilder.twig
index 0978d67226..5de62c96a1 100644
--- a/plugins/Referrers/templates/campaignBuilder.twig
+++ b/plugins/Referrers/templates/campaignBuilder.twig
@@ -1,4 +1,4 @@
 <div class="widgetBody">
     <p>{{ 'Referrers_URLCampaignBuilderIntro'|translate('<a href="https://matomo.org/docs/tracking-campaigns-url-builder/" rel="noreferrer noopener">', '</a>', '<a href="https://matomo.org/docs/tracking-campaigns/" rel="noreferrer noopener">', '</a>')|raw }}</p>
-    <div matomo-campaign-builder has-extra-plugin="{{ hasExtraPlugin|e('html_attr') }}"></div>
+    <div vue-entry="Referrers.CampaignBuilder" has-extra-plugin="{{ hasExtraPlugin|json_encode|e('html_attr') }}"></div>
 </div>
\ No newline at end of file
diff --git a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_nokeyword.png b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_nokeyword.png
index 62c59dcf04..062cb27331 100644
--- a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_nokeyword.png
+++ b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_nokeyword.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b0664444e8bde22e8277a0b6af1ee94074153501e64bd646c61cbd031fd84e29
-size 81375
+oid sha256:e4ee955746e9fc0a1a8d72a318e5d9f4576d03cac6f8dd6d0bb495b0eddf4654
+size 81420
diff --git a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_reset.png b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_reset.png
index 38b18b46aa..53cb29012d 100644
--- a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_reset.png
+++ b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_reset.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd27a0ea1baaac6119da8ddb37a49eee8383f2c4228d427adf810fafa8f55adf
-size 55076
+oid sha256:416be7ce3fa8e51a9eb390afd4fc9f54e5e7c4027c45114c7dab5fbbecb416bb
+size 55071
diff --git a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_withkeyword.png b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_withkeyword.png
index 3c97c6c65e..931379fd6c 100644
--- a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_withkeyword.png
+++ b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_generate_url_withkeyword.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aacf7ee6d657454d0793cde5ae3a3bd9e300eb876f20167be25f7b699b3556fe
-size 82686
+oid sha256:1f5a1c0d3494711b43aea7fbd096364eb9e5480792d509bed99d0221b7ef5d1a
+size 82722
diff --git a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_loaded.png b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_loaded.png
index 46b075250d..d76f10fac4 100644
--- a/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_loaded.png
+++ b/plugins/Referrers/tests/UI/expected-screenshots/CampaignBuilder_loaded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2a594900bd42d3f57192001b48eb4614a41c11dccc3f1c85bcb212456cd6b9e1
-size 70782
+oid sha256:e6474751e5d8d0aaa6ae58fd87faa76a22d186f7e76be203475deeecd82405da
+size 70771
diff --git a/plugins/Referrers/vue/dist/Referrers.umd.js b/plugins/Referrers/vue/dist/Referrers.umd.js
new file mode 100644
index 0000000000..22570b2064
--- /dev/null
+++ b/plugins/Referrers/vue/dist/Referrers.umd.js
@@ -0,0 +1,433 @@
+(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["Referrers"] = factory(require("CoreHome"), require("vue"), require("CorePluginsAdmin"));
+	else
+		root["Referrers"] = 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/Referrers/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__, "CampaignBuilder", function() { return /* reexport */ CampaignBuilder; });
+
+// 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 "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// 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/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue?vue&type=template&id=1eeeaa44
+
+var _hoisted_1 = {
+  class: "campaignUrlBuilder"
+};
+var _hoisted_2 = {
+  id: "urlCampaignBuilderResult"
+};
+var _hoisted_3 = ["textContent"];
+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_select_on_focus = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("select-on-focus");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("div", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("form", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "websiteurl",
+    title: "".concat(_ctx.translate('Actions_ColumnPageURL'), " (").concat(_ctx.translate('General_Required2'), ")"),
+    modelValue: _ctx.websiteUrl,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.websiteUrl = $event;
+    }),
+    "inline-help": _ctx.translate('Referrers_CampaignPageUrlHelp')
+  }, 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: "text",
+    name: "campaignname",
+    title: "".concat(_ctx.translate('CoreAdminHome_JSTracking_CampaignNameParam'), " (").concat(_ctx.translate('General_Required2'), ")"),
+    modelValue: _ctx.campaignName,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.campaignName = $event;
+    }),
+    "inline-help": _ctx.translate('Referrers_CampaignNameHelp')
+  }, 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: "text",
+    name: "campaignkeyword",
+    title: _ctx.translate('CoreAdminHome_JSTracking_CampaignKwdParam'),
+    modelValue: _ctx.campaignKeyword,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.campaignKeyword = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignKeywordHelp'))
+  }, 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_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaignsource",
+    title: _ctx.translate('Referrers_CampaignSource'),
+    modelValue: _ctx.campaignSource,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.campaignSource = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignSourceHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaignmedium",
+    title: _ctx.translate('Referrers_CampaignMedium'),
+    modelValue: _ctx.campaignMedium,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.campaignMedium = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignMediumHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaigncontent",
+    title: _ctx.translate('Referrers_CampaignContent'),
+    modelValue: _ctx.campaignContent,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.campaignContent = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignContentHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaignid",
+    title: _ctx.translate('Referrers_CampaignId'),
+    modelValue: _ctx.campaignId,
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
+      return _ctx.campaignId = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignIdHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaigngroup",
+    title: _ctx.translate('Referrers_CampaignGroup'),
+    modelValue: _ctx.campaignGroup,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
+      return _ctx.campaignGroup = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignGroupHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_Field, {
+    uicontrol: "text",
+    name: "campaignplacement",
+    title: _ctx.translate('Referrers_CampaignPlacement'),
+    modelValue: _ctx.campaignPlacement,
+    "onUpdate:modelValue": _cache[8] || (_cache[8] = function ($event) {
+      return _ctx.campaignPlacement = $event;
+    }),
+    "inline-help": "".concat(_ctx.translate('Goals_Optional'), " ").concat(_ctx.translate('Referrers_CampaignPlacementHelp'))
+  }, null, 8, ["title", "modelValue", "inline-help"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.hasExtraPlugin]])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    class: "generateCampaignUrl",
+    onConfirm: _cache[9] || (_cache[9] = function ($event) {
+      return _ctx.generateUrl();
+    }),
+    disabled: !_ctx.websiteUrl || !_ctx.campaignName,
+    value: _ctx.translate('Referrers_GenerateUrl'),
+    style: {
+      "margin-right": "3.5px"
+    }
+  }, null, 8, ["disabled", "value"]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_SaveButton, {
+    class: "resetCampaignUrl",
+    onConfirm: _cache[10] || (_cache[10] = function ($event) {
+      return _ctx.reset();
+    }),
+    value: _ctx.translate('General_Clear')
+  }, null, 8, ["value"]), 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"])("h3", null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('Referrers_URLCampaignBuilderResult')), 1), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("pre", _hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("code", {
+    textContent: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.generatedUrl)
+  }, null, 8, _hoisted_3)], 512), [[_directive_select_on_focus, {}]])], 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.generatedUrl]])])]);
+}
+// CONCATENATED MODULE: ./plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue?vue&type=template&id=1eeeaa44
+
+// 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/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue?vue&type=script&lang=ts
+
+
+
+var _window = window,
+    $ = _window.$;
+/* harmony default export */ var CampaignBuildervue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
+  props: {
+    hasExtraPlugin: Boolean
+  },
+  components: {
+    Field: external_CorePluginsAdmin_["Field"],
+    SaveButton: external_CorePluginsAdmin_["SaveButton"]
+  },
+  directives: {
+    SelectOnFocus: external_CoreHome_["SelectOnFocus"]
+  },
+  data: function data() {
+    return {
+      websiteUrl: '',
+      campaignName: '',
+      campaignKeyword: '',
+      campaignSource: '',
+      campaignMedium: '',
+      campaignId: '',
+      campaignContent: '',
+      campaignGroup: '',
+      campaignPlacement: '',
+      generatedUrl: ''
+    };
+  },
+  created: function created() {
+    this.reset();
+  },
+  watch: {
+    generatedUrl: function generatedUrl() {
+      $('#urlCampaignBuilderResult').effect('highlight', {}, 1500);
+    }
+  },
+  methods: {
+    reset: function reset() {
+      this.websiteUrl = '';
+      this.campaignName = '';
+      this.campaignKeyword = '';
+      this.campaignSource = '';
+      this.campaignMedium = '';
+      this.campaignId = '';
+      this.campaignContent = '';
+      this.campaignGroup = '';
+      this.campaignPlacement = '';
+      this.generatedUrl = '';
+    },
+    generateUrl: function generateUrl() {
+      var generatedUrl = String(this.websiteUrl);
+
+      if (generatedUrl.indexOf('http') !== 0) {
+        generatedUrl = "https://".concat(generatedUrl.trim());
+      }
+
+      var urlHashPos = generatedUrl.indexOf('#');
+      var urlHash = '';
+
+      if (urlHashPos >= 0) {
+        urlHash = generatedUrl.substr(urlHashPos);
+        generatedUrl = generatedUrl.substr(0, urlHashPos);
+      }
+
+      if (generatedUrl.indexOf('/', 10) < 0 && generatedUrl.indexOf('?') < 0) {
+        generatedUrl += '/';
+      }
+
+      var campaignName = encodeURIComponent(this.campaignName.trim());
+
+      if (generatedUrl.indexOf('?') > 0 || generatedUrl.indexOf('#') > 0) {
+        generatedUrl += '&';
+      } else {
+        generatedUrl += '?';
+      }
+
+      generatedUrl += "mtm_campaign=".concat(campaignName);
+
+      if (this.campaignKeyword) {
+        generatedUrl += "&mtm_kwd=".concat(encodeURIComponent(this.campaignKeyword.trim()));
+      }
+
+      if (this.campaignSource) {
+        generatedUrl += "&mtm_source=".concat(encodeURIComponent(this.campaignSource.trim()));
+      }
+
+      if (this.campaignMedium) {
+        generatedUrl += "&mtm_medium=".concat(encodeURIComponent(this.campaignMedium.trim()));
+      }
+
+      if (this.campaignContent) {
+        generatedUrl += "&mtm_content=".concat(encodeURIComponent(this.campaignContent.trim()));
+      }
+
+      if (this.campaignId) {
+        generatedUrl += "&mtm_cid=".concat(encodeURIComponent(this.campaignId.trim()));
+      }
+
+      if (this.campaignGroup) {
+        generatedUrl += "&mtm_group=".concat(encodeURIComponent(this.campaignGroup.trim()));
+      }
+
+      if (this.campaignPlacement) {
+        generatedUrl += "&mtm_placement=".concat(encodeURIComponent(this.campaignPlacement.trim()));
+      }
+
+      generatedUrl += urlHash;
+      this.generatedUrl = generatedUrl;
+    }
+  }
+}));
+// CONCATENATED MODULE: ./plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue?vue&type=script&lang=ts
+ 
+// CONCATENATED MODULE: ./plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue
+
+
+
+CampaignBuildervue_type_script_lang_ts.render = render
+
+/* harmony default export */ var CampaignBuilder = (CampaignBuildervue_type_script_lang_ts);
+// CONCATENATED MODULE: ./plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+/* harmony default export */ var CampaignBuilder_adapter = (Object(external_CoreHome_["createAngularJsAdapter"])({
+  component: CampaignBuilder,
+  scope: {
+    hasExtraPlugin: {
+      angularJsBind: '<'
+    }
+  },
+  directiveName: 'matomoCampaignBuilder'
+}));
+// CONCATENATED MODULE: ./plugins/Referrers/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=Referrers.umd.js.map
\ No newline at end of file
diff --git a/plugins/Referrers/vue/dist/Referrers.umd.min.js b/plugins/Referrers/vue/dist/Referrers.umd.min.js
new file mode 100644
index 0000000000..bd11a69129
--- /dev/null
+++ b/plugins/Referrers/vue/dist/Referrers.umd.min.js
@@ -0,0 +1,8 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["Referrers"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["Referrers"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var r=t[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/Referrers/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"CampaignBuilder",(function(){return f})),"undefined"!==typeof window){var a=window.document.currentScript,r=a&&a.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var i=n("19dc"),l=n("8bbf"),o={class:"campaignUrlBuilder"},c={id:"urlCampaignBuilderResult"},m=["textContent"];function u(e,t,n,a,r,i){var u=Object(l["resolveComponent"])("Field"),p=Object(l["resolveComponent"])("SaveButton"),d=Object(l["resolveDirective"])("select-on-focus");return Object(l["openBlock"])(),Object(l["createElementBlock"])("div",o,[Object(l["createElementVNode"])("form",null,[Object(l["createElementVNode"])("div",null,[Object(l["createVNode"])(u,{uicontrol:"text",name:"websiteurl",title:"".concat(e.translate("Actions_ColumnPageURL")," (").concat(e.translate("General_Required2"),")"),modelValue:e.websiteUrl,"onUpdate:modelValue":t[0]||(t[0]=function(t){return e.websiteUrl=t}),"inline-help":e.translate("Referrers_CampaignPageUrlHelp")},null,8,["title","modelValue","inline-help"])]),Object(l["createElementVNode"])("div",null,[Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignname",title:"".concat(e.translate("CoreAdminHome_JSTracking_CampaignNameParam")," (").concat(e.translate("General_Required2"),")"),modelValue:e.campaignName,"onUpdate:modelValue":t[1]||(t[1]=function(t){return e.campaignName=t}),"inline-help":e.translate("Referrers_CampaignNameHelp")},null,8,["title","modelValue","inline-help"])]),Object(l["createElementVNode"])("div",null,[Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignkeyword",title:e.translate("CoreAdminHome_JSTracking_CampaignKwdParam"),modelValue:e.campaignKeyword,"onUpdate:modelValue":t[2]||(t[2]=function(t){return e.campaignKeyword=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignKeywordHelp"))},null,8,["title","modelValue","inline-help"])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignsource",title:e.translate("Referrers_CampaignSource"),modelValue:e.campaignSource,"onUpdate:modelValue":t[3]||(t[3]=function(t){return e.campaignSource=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignSourceHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignmedium",title:e.translate("Referrers_CampaignMedium"),modelValue:e.campaignMedium,"onUpdate:modelValue":t[4]||(t[4]=function(t){return e.campaignMedium=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignMediumHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaigncontent",title:e.translate("Referrers_CampaignContent"),modelValue:e.campaignContent,"onUpdate:modelValue":t[5]||(t[5]=function(t){return e.campaignContent=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignContentHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignid",title:e.translate("Referrers_CampaignId"),modelValue:e.campaignId,"onUpdate:modelValue":t[6]||(t[6]=function(t){return e.campaignId=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignIdHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaigngroup",title:e.translate("Referrers_CampaignGroup"),modelValue:e.campaignGroup,"onUpdate:modelValue":t[7]||(t[7]=function(t){return e.campaignGroup=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignGroupHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createElementVNode"])("div",null,[Object(l["withDirectives"])(Object(l["createVNode"])(u,{uicontrol:"text",name:"campaignplacement",title:e.translate("Referrers_CampaignPlacement"),modelValue:e.campaignPlacement,"onUpdate:modelValue":t[8]||(t[8]=function(t){return e.campaignPlacement=t}),"inline-help":"".concat(e.translate("Goals_Optional")," ").concat(e.translate("Referrers_CampaignPlacementHelp"))},null,8,["title","modelValue","inline-help"]),[[l["vShow"],e.hasExtraPlugin]])]),Object(l["createVNode"])(p,{class:"generateCampaignUrl",onConfirm:t[9]||(t[9]=function(t){return e.generateUrl()}),disabled:!e.websiteUrl||!e.campaignName,value:e.translate("Referrers_GenerateUrl"),style:{"margin-right":"3.5px"}},null,8,["disabled","value"]),Object(l["createVNode"])(p,{class:"resetCampaignUrl",onConfirm:t[10]||(t[10]=function(t){return e.reset()}),value:e.translate("General_Clear")},null,8,["value"]),Object(l["withDirectives"])(Object(l["createElementVNode"])("div",null,[Object(l["createElementVNode"])("h3",null,Object(l["toDisplayString"])(e.translate("Referrers_URLCampaignBuilderResult")),1),Object(l["withDirectives"])(Object(l["createElementVNode"])("pre",c,[Object(l["createElementVNode"])("code",{textContent:Object(l["toDisplayString"])(e.generatedUrl)},null,8,m)],512),[[d,{}]])],512),[[l["vShow"],e.generatedUrl]])])])}var p=n("a5a2"),d=window,s=d.$,g=Object(l["defineComponent"])({props:{hasExtraPlugin:Boolean},components:{Field:p["Field"],SaveButton:p["SaveButton"]},directives:{SelectOnFocus:i["SelectOnFocus"]},data:function(){return{websiteUrl:"",campaignName:"",campaignKeyword:"",campaignSource:"",campaignMedium:"",campaignId:"",campaignContent:"",campaignGroup:"",campaignPlacement:"",generatedUrl:""}},created:function(){this.reset()},watch:{generatedUrl:function(){s("#urlCampaignBuilderResult").effect("highlight",{},1500)}},methods:{reset:function(){this.websiteUrl="",this.campaignName="",this.campaignKeyword="",this.campaignSource="",this.campaignMedium="",this.campaignId="",this.campaignContent="",this.campaignGroup="",this.campaignPlacement="",this.generatedUrl=""},generateUrl:function(){var e=String(this.websiteUrl);0!==e.indexOf("http")&&(e="https://".concat(e.trim()));var t=e.indexOf("#"),n="";t>=0&&(n=e.substr(t),e=e.substr(0,t)),e.indexOf("/",10)<0&&e.indexOf("?")<0&&(e+="/");var a=encodeURIComponent(this.campaignName.trim());e.indexOf("?")>0||e.indexOf("#")>0?e+="&":e+="?",e+="mtm_campaign=".concat(a),this.campaignKeyword&&(e+="&mtm_kwd=".concat(encodeURIComponent(this.campaignKeyword.trim()))),this.campaignSource&&(e+="&mtm_source=".concat(encodeURIComponent(this.campaignSource.trim()))),this.campaignMedium&&(e+="&mtm_medium=".concat(encodeURIComponent(this.campaignMedium.trim()))),this.campaignContent&&(e+="&mtm_content=".concat(encodeURIComponent(this.campaignContent.trim()))),this.campaignId&&(e+="&mtm_cid=".concat(encodeURIComponent(this.campaignId.trim()))),this.campaignGroup&&(e+="&mtm_group=".concat(encodeURIComponent(this.campaignGroup.trim()))),this.campaignPlacement&&(e+="&mtm_placement=".concat(encodeURIComponent(this.campaignPlacement.trim()))),e+=n,this.generatedUrl=e}}});g.render=u;var f=g;
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */Object(i["createAngularJsAdapter"])({component:f,scope:{hasExtraPlugin:{angularJsBind:"<"}},directiveName:"matomoCampaignBuilder"})}})}));
+//# sourceMappingURL=Referrers.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Referrers/vue/dist/umd.metadata.json b/plugins/Referrers/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..dce4477a3c
--- /dev/null
+++ b/plugins/Referrers/vue/dist/umd.metadata.json
@@ -0,0 +1,6 @@
+{
+  "dependsOn": [
+    "CoreHome",
+    "CorePluginsAdmin"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.adapter.ts b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.adapter.ts
new file mode 100644
index 0000000000..1bdcc587e7
--- /dev/null
+++ b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.adapter.ts
@@ -0,0 +1,19 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { createAngularJsAdapter } from 'CoreHome';
+import CampaignBuilder from './CampaignBuilder.vue';
+
+export default createAngularJsAdapter({
+  component: CampaignBuilder,
+  scope: {
+    hasExtraPlugin: {
+      angularJsBind: '<',
+    },
+  },
+  directiveName: 'matomoCampaignBuilder',
+});
diff --git a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.less b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.less
index 353b8f71a3..353b8f71a3 100644
--- a/plugins/Referrers/angularjs/campaign-builder/campaign-builder.directive.less
+++ b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.less
diff --git a/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue
new file mode 100644
index 0000000000..21dabe9ca8
--- /dev/null
+++ b/plugins/Referrers/vue/src/CampaignBuilder/CampaignBuilder.vue
@@ -0,0 +1,268 @@
+<!--
+  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 class="campaignUrlBuilder">
+    <form>
+      <div>
+        <Field
+          uicontrol="text"
+          name="websiteurl"
+          :title="`${translate('Actions_ColumnPageURL')} (${translate('General_Required2')})`"
+          v-model="websiteUrl"
+          :inline-help="translate('Referrers_CampaignPageUrlHelp')"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignname"
+          :title="`${translate('CoreAdminHome_JSTracking_CampaignNameParam')} (${
+            translate('General_Required2')})`"
+          v-model="campaignName"
+          :inline-help="translate('Referrers_CampaignNameHelp')"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignkeyword"
+          :title="translate('CoreAdminHome_JSTracking_CampaignKwdParam')"
+          v-model="campaignKeyword"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignKeywordHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignsource"
+          :title="translate('Referrers_CampaignSource')"
+          v-show="hasExtraPlugin"
+          v-model="campaignSource"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignSourceHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignmedium"
+          :title="translate('Referrers_CampaignMedium')"
+          v-show="hasExtraPlugin"
+          v-model="campaignMedium"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignMediumHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaigncontent"
+          :title="translate('Referrers_CampaignContent')"
+          v-show="hasExtraPlugin"
+          v-model="campaignContent"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignContentHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignid"
+          :title="translate('Referrers_CampaignId')"
+          v-show="hasExtraPlugin"
+          v-model="campaignId"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignIdHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaigngroup"
+          :title="translate('Referrers_CampaignGroup')"
+          v-show="hasExtraPlugin"
+          v-model="campaignGroup"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignGroupHelp')}`"
+        >
+        </Field>
+      </div>
+      <div>
+        <Field
+          uicontrol="text"
+          name="campaignplacement"
+          :title="translate('Referrers_CampaignPlacement')"
+          v-show="hasExtraPlugin"
+          v-model="campaignPlacement"
+          :inline-help="`${translate('Goals_Optional')} ${
+            translate('Referrers_CampaignPlacementHelp')}`"
+        >
+        </Field>
+      </div>
+      <SaveButton
+        class="generateCampaignUrl"
+        @confirm="generateUrl()"
+        :disabled="!websiteUrl || !campaignName"
+        :value="translate('Referrers_GenerateUrl')"
+        style="margin-right:3.5px"
+      >
+      </SaveButton>
+      <SaveButton
+        class="resetCampaignUrl"
+        @confirm="reset()"
+        :value="translate('General_Clear')"
+      >
+      </SaveButton>
+      <div v-show="generatedUrl">
+        <h3>{{ translate('Referrers_URLCampaignBuilderResult') }}</h3>
+        <pre
+          id="urlCampaignBuilderResult"
+          v-select-on-focus="{}"
+        ><code v-text="generatedUrl" /></pre>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { SelectOnFocus } from 'CoreHome';
+import { Field, SaveButton } from 'CorePluginsAdmin';
+
+interface CampaignBuilderState {
+  websiteUrl: string;
+  campaignName: string;
+  campaignKeyword: string;
+  campaignSource: string;
+  campaignMedium: string;
+  campaignId: string;
+  campaignContent: string;
+  campaignGroup: string;
+  campaignPlacement: string;
+  generatedUrl: string;
+}
+
+const { $ } = window;
+
+export default defineComponent({
+  props: {
+    hasExtraPlugin: Boolean,
+  },
+  components: {
+    Field,
+    SaveButton,
+  },
+  directives: {
+    SelectOnFocus,
+  },
+  data(): CampaignBuilderState {
+    return {
+      websiteUrl: '',
+      campaignName: '',
+      campaignKeyword: '',
+      campaignSource: '',
+      campaignMedium: '',
+      campaignId: '',
+      campaignContent: '',
+      campaignGroup: '',
+      campaignPlacement: '',
+      generatedUrl: '',
+    };
+  },
+  created() {
+    this.reset();
+  },
+  watch: {
+    generatedUrl() {
+      $('#urlCampaignBuilderResult').effect('highlight', {}, 1500);
+    },
+  },
+  methods: {
+    reset() {
+      this.websiteUrl = '';
+      this.campaignName = '';
+      this.campaignKeyword = '';
+      this.campaignSource = '';
+      this.campaignMedium = '';
+      this.campaignId = '';
+      this.campaignContent = '';
+      this.campaignGroup = '';
+      this.campaignPlacement = '';
+      this.generatedUrl = '';
+    },
+    generateUrl() {
+      let generatedUrl = String(this.websiteUrl);
+
+      if (generatedUrl.indexOf('http') !== 0) {
+        generatedUrl = `https://${generatedUrl.trim()}`;
+      }
+
+      const urlHashPos = generatedUrl.indexOf('#');
+
+      let urlHash = '';
+      if (urlHashPos >= 0) {
+        urlHash = generatedUrl.substr(urlHashPos);
+        generatedUrl = generatedUrl.substr(0, urlHashPos);
+      }
+
+      if (generatedUrl.indexOf('/', 10) < 0 && generatedUrl.indexOf('?') < 0) {
+        generatedUrl += '/';
+      }
+
+      const campaignName = encodeURIComponent(this.campaignName.trim());
+
+      if (generatedUrl.indexOf('?') > 0 || generatedUrl.indexOf('#') > 0) {
+        generatedUrl += '&';
+      } else {
+        generatedUrl += '?';
+      }
+
+      generatedUrl += `mtm_campaign=${campaignName}`;
+
+      if (this.campaignKeyword) {
+        generatedUrl += `&mtm_kwd=${encodeURIComponent(this.campaignKeyword.trim())}`;
+      }
+
+      if (this.campaignSource) {
+        generatedUrl += `&mtm_source=${encodeURIComponent(this.campaignSource.trim())}`;
+      }
+
+      if (this.campaignMedium) {
+        generatedUrl += `&mtm_medium=${encodeURIComponent(this.campaignMedium.trim())}`;
+      }
+
+      if (this.campaignContent) {
+        generatedUrl += `&mtm_content=${encodeURIComponent(this.campaignContent.trim())}`;
+      }
+
+      if (this.campaignId) {
+        generatedUrl += `&mtm_cid=${encodeURIComponent(this.campaignId.trim())}`;
+      }
+
+      if (this.campaignGroup) {
+        generatedUrl += `&mtm_group=${encodeURIComponent(this.campaignGroup.trim())}`;
+      }
+
+      if (this.campaignPlacement) {
+        generatedUrl += `&mtm_placement=${encodeURIComponent(this.campaignPlacement.trim())}`;
+      }
+
+      generatedUrl += urlHash;
+
+      this.generatedUrl = generatedUrl;
+    },
+  },
+});
+</script>
diff --git a/plugins/Referrers/vue/src/index.ts b/plugins/Referrers/vue/src/index.ts
new file mode 100644
index 0000000000..a0b0ec1413
--- /dev/null
+++ b/plugins/Referrers/vue/src/index.ts
@@ -0,0 +1,10 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './CampaignBuilder/CampaignBuilder.adapter';
+
+export { default as CampaignBuilder } from './CampaignBuilder/CampaignBuilder.vue';
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
index 15a5381be2..c4d5109be1 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:841bb4c3b9258bd5d9295992db55ebc3adc8e8d8e1d165f2b27e0ef83a90297e
-size 712598
+oid sha256:8bcf8a489ad8472043257c77f58c7dc73315dd57d88f17f1c0c0535e0387ba5f
+size 712570