Adding a data-info attribute to a link in the modal extension

[annah_brown]

How can I add this code to a modal extension in the body or footer?

<a href="" class="" data-info='{"event_action" : "link", "event_name" : "Register", "event_type" : "ET"}'>

[adrian_browning]

@annah_brown

You can use the advanced settings to change the actual HTML in the modal box.

Please see this post descrbing how to use it.

https://community.tealiumiq.com/t5/Developers/Modal-Offer-Extension/m-p/1726#M3871

Regards,

Adrian

[annah_brown]

I have tried putting it in the html of the modal box. When I add it  the modal doesn't pop up and throws errors in the console. 

Here is what I put in the footer div:

<a class="lfgAnalytics" style="styles" href="URL" data-info='{"event_action" : "link", "event_name" : "Register", "event_type" : "ET"}' >Register Now</a> 

And here is what comes out of the console when the above is saved and published:

utag.modal  Ext_31.js?utv=ut4.36.201601231721:21 Uncaught SyntaxError: Unexpected token {

utag.js:85 Uncaught TypeError: Cannot read property 'mdlW' of undefinedutag.ut.loader.cb

@ utag.js:85(anonymous function) @ utag.js:65
prototype-1.4.0.js:679 

[adrian_browning]

Hi @annah_brown,

So what isn't made clear, and should be is that you need to escape any single quotes that you use.

<a class="lfgAnalytics" style="styles" href="URL" data-info=\'{"event_action" : "link", "event_name" : "Register", "event_type" : "ET"}\' >Register Now</a>

The above will work, and display correctly.

Adrian

[annah_brown]

So, this does allow the modal to display - but the data-info is not recognized by the tealium extension we have set for the on click event when it's encased in single quotes. 

This is the code in the extension

jQuery('.lfgAnalytics').click(function(e) {
utag.link( jQuery(this).data('info') );
});

For referrence this blog post sets up how we are wanting to do this tracking:

http://tealium.com/blog/standard/ajax-tracking-urls-longer-change/

[adrian_browning]

I have just tried this, and it works fine on my test page.

How are you using this sippet?

Have you added it to the modal box?

If so you will need to escape the quotes as well. 

I would personally add that code to a JS extension scoped to DOM Ready, which should sort it out for you.

Do you get any errors or any feedback?

At this point, it may be worth contacting support@tealium.ocm so that someone can jump on a call with you if need be.

Regards,

Adrian

[kathleen_jo]

Hi @annah_brown. You can also submit a support ticket here:

https://community.tealiumiq.com/t5/custom/page/page-id/support-contact-form 

[annah_brown]

I currently have that code snippet set up in another JS extension scoped to DOM ready. I can try adding it the modal html code. 

It doesn't give any errors