- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
03-13-2018 09:03 AM
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
Solved! Go to Solution.
03-13-2018 09:19 AM - last edited on 03-13-2018 10:08 AM by kathleen_jo
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.
03-13-2018 10:14 AM - last edited on 03-13-2018 10:22 AM by kathleen_jo
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.
03-13-2018 11:00 AM
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 ?
03-14-2018 03:50 AM
03-14-2018 04:49 AM - edited 03-14-2018 04:51 AM
@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)" }); });
03-14-2018 04:52 AM
03-14-2018 09:25 AM
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
03-15-2018 07:10 PM
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 .
Copyright All Rights Reserved © 2008-2023