Tealium Extension for Button click not triggering

[aswaminathan]

I have the following code :

<div>
  <div id="reviewEnrollmentCodeText">{{aboutYou.enrollmentCode}}</div>
  <button type="button"
          id="editEnrollmentCodeButton" 
          class="btn btn-link"
          (click)="onEditEnrollmentCodeClick()">
          Edit Enrollment Code
  </button>
</div>

I have set up the following Tealium Extension, but it does not seem to trigger. Can you help
figure out what I am doing incorrectly ?  Thanks

[UnknownJ]

If you replace your jQuery selector, @aswaminathan, with:

"button#editEnrollmentCodeButton"

That ought to do the trick in terms of triggering the event.

In theory, what that'll do is:

$(document).on("click", "button#editEnrollmentCodeButton", function(){
  utag.link({
    event_category: "Form Analytics-WIQ",
    event_action: "Page_ID (js)",
    event_label: "WIQ-Edit-Enrollment-Code",
    event_name: "Flow_Strategy (js)"
  });
});

The event_action and event_name elements look to be setting as static text the name of some UDO variables - if you want to set the current values of those variables, change them to set JS Code, and use an expression like "utag.data.Page_ID" to pass the current value of the Page_ID UDO variable.

[aswaminathan]

Thanks for the quick reply, @UnknownJ. I made the change, and it is still not triggering. Must be something else that I am doing incorrectly.

[aswaminathan]

I am reviewing the Google Chrome developer tools to see the events firing, but I don't see the event .  What else could I look for to figure out the problem ?

[Srinivasan]

Hello @aswaminathan,

Instead of trying with jQuery I would recommend you to go ahead with JavaScript extension to capture the expected value when end-users on button.

$(document).click(function(){
var cls = $('#editEnrollmentCodeButton").click(function() {
if(cls == "true"){
utag.link({
event_category: "Form Analytics-WIQ",
event_action: "Page_ID (js)",
event_label: "WIQ-Edit-Enrollment-Code",
event_name: "Flow_Strategy (js)"
});
});
};

Hope this helps!!! Happy Learning!!!

[davidcreason · Accepted solution]

@Srinivasan, @aswaminathan One clarification, based on your post it sounds like you're saying not to use jQuery, but I believe you mean not to use the jQuery OnHandler Extension. Also, when referencing the jQuery object $ within code in Tealium, we recommend using jQuery instead to avoid any collisions with other libraries that may use $. Also, if the scope of the JavaScript Extension is set to DOM Ready, you do not need to load inside of jQuery(document). 

Lastly, if this is an element that isn't immediately available when the page loads, try using the second code block. I would also give the functions name as it helps with troubleshooting the call stack if there's an error. The extension' s conditions can also help control when and were the code loads. Here are some updated examples. 

// jQuery >= v1.7
jQuery("#editEnrollmentCodeButton").on("click", function reviewAppClick() {
  utag.link({
    "event_category": "Form Analytics-WIQ",
    "event_action": "Page_ID (js)",
    "event_label": "WIQ-Edit-Enrollment-Code",
    "event_name": "Flow_Strategy (js)"
  });
});

// Element does not exist on page load
jQuery("body").on("click", "#editEnrollmentCodeButton", function reviewAppClick() {
  utag.link({
    "event_category": "Form Analytics-WIQ",
    "event_action": "Page_ID (js)",
    "event_label": "WIQ-Edit-Enrollment-Code",
    "event_name": "Flow_Strategy (js)"
  });
});

[Srinivasan]

Thanks for detailed elucidation @davidcreason.

[aswaminathan · Accepted solution]

Thanks @davidcreason

I am doing something wrong, because I do not see a Tealium event being triggered despite creating the Javascript Code Extension. When I click on the EditEnrollmentCode button, I should be to see the value of utag.link.event_label in my Chrome Developer Tools console, but I see "undefined". 

I am doing something fundamentally wrong here, I suppose.  I have no Javascript code in my web components.  The only thing I have done is embed the javascript from Code Center into my index.html. Then I define the Javascript Code Extension in the TealiumIQ console, as per your instructions.  

The pages are built with Angular 5.  There is already a coding based approach done in the past, and the code still remains there, for other events. The code looks like this :

this.tealium.link('Continue-ReviewApplication');

I am trying to not insert this type of code in evey place I need a Tealium event triggered. 

What am I doing wrong ?

Thanks,
Anand

[aswaminathan]

Thanks to help from all who replied to my original support and Tealium Support, I got this addressed. The Tealium javascript was from Production but I was testing in Dev .