Should Target work with custom html elements?

[dorianhallward]

We have components in Experience Manager written via a javascript framework.  As a result there are custom html elements in our markup.  This is presumably quite a common scenario.  Target seems to struggle to work with this markup - in terms of amending text and images.

What should Target be able to do in this case and - if it is problematic - what can our developers or adobe do to help?

Here's a snippet example of our markup,

[johnanish]

Hi dorianhallward​,

This answer might seem like a long shot, but... Has your dev team considered adding in a framework to simplify working with AEM components - such as jQuery. Here is the article: Adobe Experience Manager Help | Integrating the JQuery Framework into Adobe Experience Manager

If that's the case, then you should be able to write some code that waits for the jQuery to initialize/ DOM Ready and then use the delegate functionality of jQuery. Link here: http://api.jquery.com/on/

Assuming "sh-header-card" is the custom HTML markup you have, set jQuery to look for something like this

jQuery('body').on(["INSERT EVENT HERE"],"sh-header-card", function(){
     // add js code to do what you want to here
})

Hope this helps!

[dorianhallward]

John thank you very much for taking the time to reply. We have written our components via a javascript framework: Vue.js.

Our components make extensive use of custom html elements. So i suppose the root of my question is: do custom html elements pose a problem for Adobe target, in terms of locating text and images to replace in a/b tests? For most of our custom html elements Adobe seems OK, but it struggles with the sh-header in my original snippet

[johnanish]

Hi dorianhallward​,

This should still work because at the end of the day vue.js still translates to native js. Would it be possible to select the element via the native js such as document.querySelector and make modifications? Can you show some screenshots of what you would be trying to achieve as well?

A longer and not recommended approach would be to use a setTimeout timer (not setintervals)

[dorianhallward]

Thanks again John for your suggestions.

My forum question here is not a programming one. It's about using the Target GUI. When we try and edit one of our existing website pages (served by Aem) the Target GUI - that allows you to highlight parts of a page and change text and images - fails to correctly swap-in the target user's proposed amendments to text and images.

The html parts of the Web page that target can't seem to amend are specifically the sh-header custom elements in my snippet above. Other custom html elements (sh-button, sh-card etc) are OK. Perhaps I should include some of those here for comparison?

Thanks joe

[johnanish]

If you can include some screenshots, it would be possible to make some recommendations.

Nevertheless Target should be able to make the changes you require from the VEC experience code editor/Modifications section.