Tracking a pop up window with a button on it

[alicehenot]

Hello,

I have on my website a subscription form as a pop up window (url of the page is not changing). the form is validated by a "subscribe" button.

I need to track the info filled in by the user in this form (customer name, email, age). And also need to track the subscribe button.

Should I use a utag.view or a utag.link?

and how do I implement it in Tealium?

Thanks,

[kathleen_jo]

Hello @alicehenot. Great question. We have this discussion here that can give you some insight:

https://community.tealiumiq.com/t5/Tealium-iQ-Tag-Management/Tagging-Modals-Popups/m-p/18971

Which, of course, leads to other discussions. Let me know if this helps. :-)

[Srinivasan]

Hello @alicehenot

I'd recommend to use the below sample jQuery code to track How many users are click on Subscribe button and what value have been filled by end users (customer name, email, age).

jQuery("#ID Or .CLASS (specific to Subscribe button)").on("click", function() {

var abc = $(#ID Or .CLASS (specific to customer name field)).text()

var dataObj = JSON.parse(JSON.stringify(utag.data));
dataObj.event variable = "Subscribe";
dataObj.event variable = "Button Click";
dataObj.event variable = abc;
dataObj.event variable = "";
utag.link(dataObj);
});

I presume hope it helps for you to assign the "age" and "email"associated CLASS or ID to get the values on the same as well.

Thanks!

[Yoosuf]

Hi @alicehenot. I do not recommend using the utag.link method to execute the event which you want to fire on that page, because it would cause other preceeding events which fire within the same pageview to be duplicated.

An ideal solution to this is if you want to trigger the Google Analytics event would be to pass the following code snippet inside the click event above,

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

Also remember to pass the value of "nonInteraction:true" or else it would affect the bounce rate in your Google Analytics account whenever this event has fired

[alicehenot]

thanks for your reply @Yoosuf.

Is this done by using a jQuery onHandler extension?

For clicks, I use a utag.link code structured as follow:

<a href=‘url' target=‘xx‘ id=“Event button (utag.link)"  onclick="utag.link({event_attr1: ‘', event_attr2:‘', site_section:‘', page_section:’', page_category: ‘', page_name: ‘'});“></a>

Isn't there as similar code but for utag.view that I could use?

[Yoosuf]

Hi @alicehenot. Based on the code snippet which you've shown it appears that you've hardcoded the utag.link code in your site which is most certainly not a recommended option at all; as this would require a code change even you plan to modify/remove the event in future. I think this is more common in Google Tag Manager implementations, but with Tealium you should try and keep all tracking snippets within Tealium, only data layer values should be hard-coded.

I wasn't referring to the jQuery onHandler, its the JavaScript extension where you could write a small piece of JS code to bind to the popup window's submit button. Similar to,

jQuery('#form-id').on('submit',function(e){
  //write the GA code or whatever you want to execute here
]);

If that doesn't work, try binding to the button element on click and in that case change the "on" to "one"

Note :- You can also pass the utag.link code inside the click event above, but the downside of this is that if you have any other events setup on that page, those events would start to trigger multiple times.