onclick Command with javascript in tridion component

Question

This is the code in a component I am trying to modify and publish.

This is the code that I want to add on onClick of a hyperlink in a component.

Onclick=“var s=s_gi(s_account);s.linkTrackVars='eVar7';s.eVar7='optin.holidays';s.tl(this,'o',Email Signup | Holidays')”

As soon as I try to add the single quote, the rendering gets messed up. I tried replacing the ‘eVar7’ with /’eVar7/’, /”eVar7/”, "eVar7" and 'eVar7' but none of them worked. So then I tried this.

Onclick=“var s=s_gi(s_account);s.linkTrackVars=eVar7;s.eVar7=optin.holidays;s.tl(this,o,Email Signup | Holidays)”

and the link rendered but it did not work(did not send the values to Omniture)

So I went back to basics and then tried to add this code

<a title="Holidays" href="tcm:8-21734" onclick="alert(\'here\');"><img title="btn_email_sign_up" alt="btn_email_sign_up" src="tcm:8-23980"/></a>

And this is what I get in the .aspx

<tridion:ComponentLink runat="server" PageURI="tcm:13-31055-64" ComponentURI="tcm:13-21734" TemplateURI="tcm:0-0-0" AddAnchor="false" LinkText="&lt;img src=&#39;/Images/btn_email_sign_up_tcm13-23980.jpg&#39; /&gt;" LinkAttributes="onclick=&#39;alert(&#92;&#39;here&#92;&#39;);&#39;" TextOnFail="true"/>

This is what I see in firebug

<a here\');'="" onclick="alert(\" href="/Email-Signup/Holidays.aspx"><img src="/Images/btn_email_sign_up_tcm13-23980.jpg"></a>

Please let me know if anyone can help and if you need the TBB which renders this component.

Thanks in Advance

How are you adding this JavaScript to the HTML? Is it in one of your Components? Or in a DWT? Or a C# TBB? — Frank van Puffelen, Aug 21 '12 at 22:18
What's in the link in the source of the .aspx on the presentation server? — Alvin Reyes, Aug 23 '12 at 15:22

score 3 · Answer 1 · edited May 23 '17 at 12:20

I tried reproducing your problem, but for me things seem to work fine. So I'll describe what I have in hopes that it helps you solve your problem:

Schema

I have a Schema with these fields:

LinkedComponent - a Component Link Field
ImageToDisplay - a Multimedia Component Link Field
OnClick - a single-line text field

Component

I created a Component based on this schema that links to some other Component and Image in my Tridion instance and has your script in the OnClick field.

This is the XML for that Component:

<Content xmlns="uuid:9e69dd45-f249-42a5-9f9a-5f68478b106f">
  <LinkedComponent xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
    xlink:href="tcm:1-91" xlink:title="Xbox360Kinect"></LinkedComponent>
  <ImageToDisplay xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" 
    xlink:href="tcm:1-90" xlink:title="Kinect"></ImageToDisplay>
  <OnClick>var s=s_gi(s_account);s.linkTrackVars='eVar7';
    s.eVar7='optin.holidays';s.tl(this,'o',Email Signup | Holidays')</OnClick>
</Content>

Note that I just added a line-break in the OnClick value for readability. This line-break is not present in the original XML.

DWT

Next I creates this DWT to output the link:

<a title="Holidays" tridion:href="@@LinkedComponent@@" onclick="@@OnClick@@">
  <img title="btn_email_sign_up" alt="btn_email_sign_up" src="@@ImageToDisplay@@"/>
</a>

Once again, any line-breaks in the above fragment were added for readability only. The DWT in my Tridion system has all this on a single line.

Component Template, Page Template and Publication Target

I use this DWT in a Component Template that is set to output an HTML fragment. Aside from the DWT, this Component Template only contains Default Finish Actions (after the DWT of course).

The Page Template I used is a copy of the regular Default Page Template, where I just changed the file name extension to aspx.

The Target Language of my Publication target is set to ASP.NET.

Published ASPX

All of these steps lead to the following fragment in my published ASPX page:

<tridion:ComponentLink runat="server" PageURI="tcm:1-514-64" ComponentURI="tcm:1-91"
   TemplateURI="tcm:0-0-0" AddAnchor="false" LinkText="&lt;img 
   src=&#34;/GameShop/Images/Kinect.jpg&#34;  title=&#34;btn_email_sign_up&#34; 
   alt=&#34;btn_email_sign_up&#34;/&gt;" LinkAttributes=" title=&#34;Holidays&#34; 
   onclick=&#34;var s=s_gi(s_account);s.linkTrackVars=&#39;eVar7&#39;;s.eVar7=&#39;optin.holidays&#39;;s.tl(this,&#39;o&#39;,Email Signup | Holidays&#39;)&#34;" 
   TextOnFail="true"/>

Here too I added some line-breaks to slightly improve readability. In the original ASPX page, this entire block is on a single line.

HTML in Browser

Finally this leads to the following HTML in the browser:

<a href="/GameShop/Xbox360/Accessories/Xbox360Kinect.aspx" title="Holidays"
  onclick="var s=s_gi(s_account);s.linkTrackVars='eVar7';s.eVar7='optin.holidays';s.tl(this,'o',Email Signup | Holidays')">
  <img src="/GameShop/Images/Kinect.jpg" title="btn_email_sign_up" 
    alt="btn_email_sign_up">
</a>

I am not sure if the onclick script gets triggered, but I don't think that was your initial question. Despite a ton of escaping going on at various layers, the script ends up in the HTML fine - at least to my eyes.

Don't mix JavaScript and Content

That leaves one big question though: why on earth are you trying to put JavaScript in a field of the Content? That violates all best practices of separating Content from Code and just means you're setting yourself up for maintenance problems in the future (e.g. what if you want to start sending out emails?).

Having clicking-on-links tracked by analytics software is a valid requirement of course (in fact, it has been a feature of Tridion's Content Delivery stack since as long as I can remember).

But I suggest implementing it in a different way, for example by simply marking each such link with a specific CSS class or an HTML5 data attribute:

<a href='...' data-tracking-label='Signup | Holidays' 
              data-tracking-key='optin.holidays' ...

Then you can make the JavaScript to find these links generic and just put it in the regular JavaScript files that your web site undoubtedly already has.

See also this question from Manoj and Quirijns answer: How to Implement Google Analytics in SDL tridion web sites?

Ram G · Answer 2 · 2012-08-23T15:11:03.430

1

Try changing to this. tridion:href resolves component link and img src publishes images.

<a title="Holidays" tridion:href="tcm:8-21734" onclick="alert('here');"><img title="btn_email_sign_up" alt="btn_email_sign_up" src="tcm:8-23980"/></a>

For Link Resolving on CDA, the component "tcm:8-21734" needs to be on a page and the page needs to be published. When link resolves successfully, the link will be pointing to the page url (e.g.; structuregroupfolderpath/filename.html)

Here is the doc on Tridion Link Resolving.

http://sdllivecontent.sdl.com/LiveContent/content/en-US/SDL_Tridion_2011_SPONE/concept_05ACF7173DCA4790A458CDE2BA33E2CC

edited Aug 23 '12 at 15:11

answered Aug 21 '12 at 22:00

Ram G

4,829
1
16
26

Thanks Ram but this did not work for me. The output was . The javascript alert worked but the hyperlink was gone – Shashwati Panigrahi Aug 22 '12 at 01:57
Seems the linking is not getting resolved. Do you have the component on the page? Is the page published? – Ram G Aug 22 '12 at 11:46
Yes, the page publishes and the javascript works fine but the link is gone. – Shashwati Panigrahi Aug 23 '12 at 12:52
Is the link code still present in the published ASPX? If not, what target language did you set on your publication target? And which output language do you have for this component template? – Frank van Puffelen Aug 23 '12 at 13:37
Also, please check my updated note on link resolving. Page we are referring to is the page where you want the link to be resolved. – Ram G Aug 23 '12 at 15:12