How to Pass HTML with JSON through Content Modification Extension

[jeff_snyder]

Hello, I am trying to integrate the following script into our website using the content modification extension: http://toddmotto.com/reengineering-the-jbar-plugin-with-immediately-invoked-data-expressions/ (desired end result: http://toddmotto.com/labs/jbar/) The tag is set to load on the applicable pages which works fine. My challenge is passing the proper html through the content modification extension. The demo html using the data-jbar attribute is as follows: (edit: I couldn't use the div tags or it erased the entire code block.) class="jbar" data-init="jbar" data-jbar='{ "message" : "jBar, re-imagined. Get version 2.0.0 now!", "button" : "Download", "url" : "http://toddmotto.com/labs/jbar/jbar_v2.zip", "state" : "closed" Inside the CME, I replaced the double quotes with & quot; and escaped the single quotes. But when the code is injected in the page, the single quotes are replaced with double quotes and the bar does not appear. There are no errors throw in the console. It works fine locally but won't seem to work with Tealium. What am I missing here? Any insight would be greatly appreciated. Thank you, Jeff

[TealiumJustin]

You don't need to HTML encode anything. I think the browser developer tools are replacing your single quotes with double quotes just for the sake of displaying the source. All you need to do is escape the single quotes. Like this: data-jbar=\'{ And this: }\'> Here's what the generated Tealium code looks like (trimmed for readability). You can look in your utag.js source to find something similar: n.innerHTML = 'div class="jbar" data-init="jbar" data-jbar=\'{ "message" : "jBar", "button" : "Download", "url" : "", "state" : "closed" }\''; However, here is what I see in the browser's developer tools (Chrome and Firefox), notice that double quotes surround the entire JSON string (HTML tags removed: div class="jbar" data-init="jbar" data-jbar="{ "message" : "jBar", "button" : "Download", "url" : "", "state" : "closed" }"

[son_hoang]

I am not sure how your utag.js is set to run, but the content modification extension only runs in the footer or at DOM ready. This jQuery plugin looks like it doesn't wait for DOM ready so I believe there may be issues with injecting the DIV asynchronously. I don't believe the issue is related to how the HTML is injected on the page.

[jeff_snyder]

Hi Justin, thanks for responding. I removed the HTML encoded double quotes and left the escaped single quotes yet it's still not working. data-init="jbar" data-jbar=\'{"message":"Free Shipping...}\'> I'm not a developer by any means, but I took at a look at the script in Developer Tools and watched 'elem' from here: var jBar = function (elem) { this.elem = elem this.$elem = $(elem) this.jsonConfig = this.$elem.data('jbar') } As I step through the script, it says that elem is Not Available. I am not sure exactly what this means, but it would lead me to believe it's not seeing our div on the page (maybe?). Could there be something with jquery and the CME that is causing the issue? Is there another way to test this outside of CME that could rule it out? Thanks for the help, Jeff

[jeff_snyder]

Would you suggest changing the content modification extension to load in the footer instead of DOM ready then? Does changing the wait flag for the tag loading the jquery plugin to 'No' force it to wait for DOM ready or is it the other way around? The pop-up help is a little unclear.

[son_hoang]

The 'footer' version of the utag is something we don't encourage people to use any more. If you aren't already using it for legacy reasons, changing it to 'footer' won't work for you now. I am not sure what you mean by tag loading the jQuery plugin. Generally though setting the wait flag for 'yes' means waiting for DOM ready. Regardless, if the utag.js file is inserted via the async method, I think you will still run into timing issues with that plugin. If you need additional help with this use case, please contact your account manager so we can examine the issue in more detail.

[jeff_snyder]

"I am not sure what you mean by tag loading the jQuery plugin." I added a tag in Tealium to load the jbar.js file. This is what I was referring to. Thank you very much for the help, Jeff

[son_hoang]

Ah okay thanks for the clarification. Please note that sync versus async loading is a separate timing issue with DOM ready versus not DOM ready. I don't think the plugin was meant to function in this kind of setup.