AEM Analytics: Sending Original Field Values in Locales. Part 2 | AEM Community Blog Seeding

[kautuk_sahni]

AEM Analytics: Sending Original Field Values in Locales. Part 2 by Exadel

Abstract

Content migration in AEM is a difficult task unless you know the necessary workarounds and ways to manage content in AEM analytics. In the previous article, our Marketing Technology Practice team was looking at how to manage analytics for plain text fields. In today’s post, we will look at an AEM RTE field in particular.

Managing Links Inside AEM Rich Text Editor
Managing AEM RTE analytics will be a little different from managing plain text fields. Since the AEM RTE text field stores HTML, we’ll need to find a way to search for all the links inside HTML and then inject the data-an-id attribute into these links. The implementation will consist of 2 parts: on the fly HTML update on AEM RTE editing and managing already existing components.

Clientlibs: Injecting Attributes into Links
The following code listens to the AEM RTE input field update. Additionally, if you add a link, this JavaScript code will add the needed attribute to the link inside the RTE field.

(function ($, $document) {
"use strict";

var CTA_RTE_ID_CLASS = "analytics-cta-rte-id",
DIV_WRAPPER_RTE = "div[data-wrapperclass*='" + CTA_RTE_ID_CLASS + "']",
APPLY_LINK_BUTTON = "coral-popover[data-rte-dialog='link'] >* button[data-type='apply']";

$document.on('foundation-contentloaded', dlgReadyHandler);

function dlgReadyHandler() {
$(DIV_WRAPPER_RTE).each(function () {
var $divWrapper = $(this);
$divWrapper.off("input").on("input", function (e) {
$(this).data('timeout', setTimeout(function () {

$(e.currentTarget).find("a").each(function () {
$(this).attr("data-an-id", this.text);
$(this).addClass("an-title");
});
}, 300));
});

var checkExist = setInterval(function () {
$divWrapper.closest("." + CTA_RTE_ID_CLASS).find(APPLY_LINK_BUTTON).each(function () {
$(this).off("click").on("click", function (e) {
$(this).data('timeout', setTimeout(function () {
$(e.currentTarget).closest("." + CTA_RTE_ID_CLASS).find(DIV_WRAPPER_RTE).trigger("input");
}, 500));

});
clearInterval(checkExist);
});

}, 300);
});
}

})($, $(document));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
(function ($, $document) {
"use strict";

var CTA_RTE_ID_CLASS = "analytics-cta-rte-id",
DIV_WRAPPER_RTE = "div[data-wrapperclass*='" + CTA_RTE_ID_CLASS + "']",
APPLY_LINK_BUTTON = "coral-popover[data-rte-dialog='link'] >* button[data-type='apply']";

$document.on('foundation-contentloaded', dlgReadyHandler);

function dlgReadyHandler() {
$(DIV_WRAPPER_RTE).each(function () {
var $divWrapper = $(this);
$divWrapper.off("input").on("input", function (e) {
$(this).data('timeout', setTimeout(function () {

$(e.currentTarget).find("a").each(function () {
$(this).attr("data-an-id", this.text);
$(this).addClass("an-title");
});
}, 300));
});

var checkExist = setInterval(function () {
$divWrapper.closest("." + CTA_RTE_ID_CLASS).find(APPLY_LINK_BUTTON).each(function () {
$(this).off("click").on("click", function (e) {
$(this).data('timeout', setTimeout(function () {
$(e.currentTarget).closest("." + CTA_RTE_ID_CLASS).find(DIV_WRAPPER_RTE).trigger("input");
}, 500));

});
clearInterval(checkExist);
});

}, 300);
});
}

})($, $(document));
As you can see, this js code is looking for AEM Rich Text Editor fields with the “analytics-cta-rte-id” class, so we will add this class to the AEM RTE field:




1
2
3



NOTE: Don’t forget to add your client lib category into “extraClientLibs” in the dialog.

Now, when you’re changing any text in the AEM Rich Text Editor, it will automatically rewrite all the links inside.

Read Full Blog

AEM Analytics: Sending Original Field Values in Locales. Part 2

Q&A

Please use this thread to ask the related questions.