Extensions Set-Up | Tracking Issue

Silver Contributor
Silver Contributor

I have been setting up JQuery Onhandlers using "jquery selector" alt tag names for images. I noticed tracking will not work if an alt tag name has special characters. Is there a way to fix this issue without changing the alt name of the image?

9 REPLIES 9

Extensions Set-Up | Tracking Issue

Employee Emeritus

Hi @jonathan_mantil,

Try adding a backslash before the special character in the alt tag e.g. [alt="jon\'s alt tag"]

Extensions Set-Up | Tracking Issue

Moderator
Moderator

Hey @jonathan_mantil

 

In order to make sure that the resulting utag.js file is syntax error-free, the jQuery extension will only allow one type of quotes to be used in the selector field, which makes it tricky in cases where you really do want to use a single quote/apostrophe in your selector.

 

There is a workaround for this, which is to substitute the actual quote character for its unicode representation. This doesn't make for very readable code, but unfortunately there is no other option at present, and it's not something that you should need to do very often. The unicode representation in JavaScript for a single quote is \u0027. Here's an example:

 

To represent "Dave's wooden ladders", you would do:

 

alt="Dave\u0027s wooden ladders"

 

jquery.png

 

 

When this gets evaluated in your browser, your browser will execute the unicode command and will see this as the original text "Dave's wooden ladders".

 

For reference in case you ever need it, the unicode representation in JavaScript for a double quote is \u0022

 

I hope this helps.

 

Craig.

Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.

Extensions Set-Up | Tracking Issue

Silver Contributor
Silver Contributor

Hi @christina_schel! For some reason this procedure is not working for me.

Extensions Set-Up | Tracking Issue

Silver Contributor
Silver Contributor

Hi @craig_rouse! I tried applying this method and it's not working for me.Tealiuem.png

Extensions Set-Up | Tracking Issue

Employee Emeritus

Hey @jonathan_mantil,

 

What is the alt tag you are having trouble with?

Extensions Set-Up | Tracking Issue

Moderator
Moderator
Hi @jonathan_mantil. Can you please elaborate? It looks like you might have tried to post an image, but I'm not seeing it. Thanks, Craig.
Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.

Extensions Set-Up | Tracking Issue

Silver Contributor
Silver Contributor

Hi!

 

The alt tag is What's New in Suits!

Extensions Set-Up | Tracking Issue

Moderator
Moderator

Hey @jonathan_mantil!

 

I just set up a demo page showing this in action, and it does work, but you need to be careful about the types of quotes you are using. It seems that the screenshot in my previous answer was incomplete. Here's a new screenshot:

 

2016-04-14_1545.png

 

Here is a demo page showing it in action:

 

http://solutions.tealium.net/hosted/cpr/suits.html

 

If you click on the "Suits" button at the top of the page, this will trigger the jQuery onHandler extension, which in turn triggers an alert to show that you have clicked the button.

 

The full code for the jQuery handler, assuming it is an anchor (<a>) element, is:

 

a[alt="What\u0027s New in Suits!"]

 

\u0027 represents the single quotation mark in unicode.

 

Let me know if you have any trouble implementing this.

 

Thanks,

 

Craig.

Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.

Extensions Set-Up | Tracking Issue

Silver Contributor
Silver Contributor
Public