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

Gold Contributor
Gold Contributor

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"}'>

7 REPLIES 7

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

Tealium Employee

@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

Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.

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

Gold Contributor
Gold Contributor

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 

 

 

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

Tealium Employee

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

Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.

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

Gold Contributor
Gold Contributor

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/

 

 

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

Tealium Employee

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

 

utag_link.png

 

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

Ask me anything Tealium related or TypeScript/JavaScript, or NodeJS.
Please remember to mark solutions as accepted for future searchers.

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

Employee Emeritus

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

 

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

Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.

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

Gold Contributor
Gold Contributor

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

Public