Should Target work with custom html elements? | Community
Skip to main content
D
dorianhallward
New Participant
January 15, 2019

Should Target work with custom html elements?

  • January 15, 2019
  • 1 reply
  • 8745 views

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,

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    johnanish-1
    johnanish-1
    New Participant
    January 17, 2019

    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!

      D
      dorianhallwardAuthor
      New Participant
      January 17, 2019

      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-1
        johnanish-1
        New Participant
        January 25, 2019

        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)

          Terms & ConditionsAccessibility statement

          Loading footer...