Tracking actions like selecting a checkbox - google-analytics

I have some check boxes on my website selecting which the data on the page gets filtered but the page name remains the same. I want to capture the data for visitors selecting any of the check boxes. Can you please let me know how can this be done?
Presently, I have different page name whenever the user select any of the check box. But by doing this, Page views data for that page becomes irrelevant.

For Omniture tracking, that's very possible, but you need to add a bit of javascript. You need to add an onClick event for the checkbox, and have it submit a custom link event to Adobe. They provide a function for it:
s.tl(this, 'o', 'Checkbox X Clicked');
Prior to this call, you can set props/evars if you want other tracking tied to this event. It doesn't count as a page view, though.
The Omniture implementation guide is here:
http://microsite.omniture.com/t2/help/en_US/sc/implement/oms_sc_implement.pdf... do a search for the s.tl() function. It'll explain.

Presumably, your page has JavaScript that does the filtering.
You would need to add to this JavaScript to send an AJAX request to the server every time the user makes their selection. The server will need to track the requests in a database or a file. After that, you can analyse the results.
There are many ways to send AJAX requests in JavaScript. The basics are here: http://www.w3schools.com/ajax/default.asp but there are also 3rd party libraries available.
Unfortunately there is nothing that "google-analytics' can do for you here, as far as I know.
Good luck,
DC

Related

Hubspot submissions fire twice on Google Tag Manager

I was wondering if someone have had this type of issue when tracking form submissions from a hubspot form.
To give you some context, our client' site is an SPA and has x3 different Hubspot form.
The solution I applied to track form submissions was to create a Custom HTML HubSpot Success Listener Tag, and then I created a look-up table to pass the form ID in a more friendly way.
The issue I'm having is that when I debug this implementation and subscribe to more than one form during the same session, the second submission duplicates:
I know I can configure the tag to fire once per event, instead of once per page. However, I don't want to lose the ability to count a second form during the same session because it's possible a user will want to fill out one form to receive information and another form to arrange a meeting.
Should I get the web developers involved to implement a dataLayer push for each form?
Thanks.
First, you want to debug your existing solution. You don't need GTM for it, though you can still use it. For the debugging, you will want to know what HS returns in their callback on form submission.
Just open your console, paste a listener that would show you the payload coming with it and inspect it:
window.addEventListener("message", function(event) {
console.log(event.data);
});
You will see something like this:
This indicates that we get three callbacks on form submission. You can listen for any of these.
Ah, looks like I'm getting the same form IDs that you have on your screenshot. Now, I'm not sure where that ID comes from. It's likely your developers and not HS are responsible for form IDs. I don't imagine HS could make such a trivial mistake. So ask the devs to change the form ids.
If they can't set unique ids for the forms, then yes, they will have to push custom events there.

Is there a way to track any form being filled on google tag manager?

Is there a way to track any form being filled on google tag manager? I looked at the options, and there doesn't seem to be a way to do this, I can capture events for form submission, but not when the form is being filled by an user. Is there an easy way to do this? I tried to capture the event with input being clicked by the user, but it triggers on every page load. Check if one of the input field in the form is being filled.
Well, you generally have two ways of doing it: ask your front-end devs to write the code and just send you a dataLayer event when it happens, or write the code on your own.
If you're not able to delegate it to the FE devs, then you will have to write it on your own. Consider what you want to do. The simplest thing from here would be detecting clicks on that one field, assuming that if a user clicked it, then they will fill it. Tracking like this is not perfect since there are other ways to fill a field without clicking/tapping it And also there will be cases when a user clicks it, but doesn't type anything. But this is probably what you want to do. For this, you only need to pick a right CSS selector and use built-in funcitonality of GTM.
If you actually want to track when the field changes input, you will have to write your own event listeners and with it, send yourself dataLayer events and then listen to those and send the event accordingly.
This is what you want to know about the change event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
You will also likely want to prevent event sent on every change, so make a blocking variable that you set after the listener callback fires once.
This is very messy. It's not likely worth it to go this route.

Cross-page posting with target _blank leaves source page unfunctional

I'm trying to describe it in as few steps as possible:
I have Page1.aspx with lot of controls, and Preview and Save button among those. I also have Page2.aspx that is the redirection target of a Preview Button click.
Since I need all the controls selections from Page1 to draw a preview on Page2 the redirection is done with setting Preview's PostBackUrl.
I also must have preview shown on a new tab or window so I used onClientClick="aspnetForm.target='_blank'" for Preview button definition.
Save button-click callback, after storing data to a database does redirection to some Page0.aspx (initial list of reports - the subject of the code)
Preview button works fine - a preview renders in a new tab, but when I go to the old tab and click on Save, I see from debugger, that firstly Page2.aspx(?) and secondly Page1.aspx are loaded. Then all the data is stored in the db, but though Page0 redirection is executed Page1.aspx stays loaded in the browser.
I have no idea what processes are behind this. Could one who knows give me an insight? Or if you consider my approach impossible to implement give some idea how to do the same?
If it's of importance, everything on the Page1 is located in an update panel.
Thank you very much for replying
In ASP.NET there are basically zero (0) circumstances in which you will ever send form data from one page to another. Although what exactly you are trying to accomplish is vague, you can consider some of the following:
Isolate unique operations/systems to a single page. If you have something like a User Profile, don't have three different aspx pages; just use a single page for the user or admin to manage that data / functions. Postback events are your friend.
Understand the difference between ViewState and traditional form data. I'm guessing that if you're trying to post form data from one page to another, you probably don't understand the point of ViewState. Using a single page to maintain temporary data that the user is currently working with is a great use for ViewState. If you want the data to appear on another page then you need to consider the data from the previous page as final and thus should be saved to a database or some other medium.
These are just some general guidelines because there is no exact answer to your problem without saying something generic like "You're doing it wrong." I would recommend starting by never again trying to post form data from one aspx page to another.

How to keep a rendered page for later usage (to resend it later)

I have an asp.net application with a search page, with criteria and result display on the same page. I want to keep a copy of the populated search page to redistribute it later to the same user, upon the button click on another page. It's kind of a "return to search" button. How can I do that?
Here is some context:
The search criteria is made up of some basic controls, and the results are then (after postback) displayed in a GridView. I also have a master page. Simple as that.
Now consider the following scenario: The user can investigate the results by clicking links that show detail pages, and can drill down over quite many detail pages with associated data. If he/she wants to get back to the search results he/she needs to click the back button of the browser quite many times.
I would like to provide a "Back to search" button on the master page that allows to return to the populated search page with one click.
Note:
I can not use the browser history in any way because it must work also when the user opened one of the detail views in another tab.
I have seen Keeping the Viewstate persistent and retrieve it on demand but it hope there is an easier solution because my grid is paginated and I have also more than one search page, where I would like to return to just the last one used.
Thanks, Marcel
I can offer some logical ways to resolve this problem, without using specialized asp.net features if they exist:
1) Is there some way to save the search string in GET request? So you can save it some way between moving through pages?
2) Another way is caching search pattern (with all filters or what you need there) somewhere - in database, for example and contain some key in get request, which would point on this pattern.

Ajax enabled search for products with multiple criteria

want to have search functionality as on this website
http://www.carwale.com/new/search.aspx#budget=6&budget=8&fuel=2
here whenever the user filters search(checks any checkbox), it updates results accordingly,
that can be understood as an ajax filter.
But at the same time, the query string also reflects for the change,
which helps the user to bookmark the filter search for later reference.
changing it through asp.net/javascript may cause the page to reload..
any hint or suggestions on implementing the same would be really helpful..
This can be done with the help of 3 things together
1) as #Aristos said, checkboxes with Auto Postback enabled
2) Ajax control toolkit Modalpopup, which gets fired automatically on every async postback (http://weblogs.asp.net/ruslan/pages/ajax-update-progress-updateprogress-in-ajax-modal-popup-modalpopupextender.aspx or http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html)
3) History Points (http://msdn.microsoft.com/en-us/library/cc488548.aspx)
This can be done completely without the use of jQuery, if you dont want to use it.
-- For the first part, he have a set of check boxes list with autopostback.
In every post back the list is updated base on the selected check box.
All is simple until now, the cool is that is have a nice interactive interface (made with javascript and jQuery).
-- About the second part, how its change the url so can be bookmark with out reload the page. The trick here is that is place the parameters after the anchor # eg:
/new/search.aspx#budget=2
Using the anchor # the page is not reload and stay as it is. So when some one click on the check boxes, via javascript is also update the url, but only what is after the # so the page stay as is with out fully reload.
Now the parameters after the # can not read on code behind but only via javascript.
So when you have bookmark this page and you go direct to eg /new/search.aspx#budget=2 the javascript reads what is after the # and translate it to commands, check the appropriate checkboxes, and ask for refresh the content. All that can be done only via javascript.
I see that is use the jQuery history plugin as helper with this schema.
http://archive.plugins.jquery.com/project/history
The same trick with parameters after # is done from amazon, when you navigate on catalog, from page to page.
-- One more clever trick that is done is that is open a full page wait, so the user can not interact with the page until the page is ready again. If it not do that, and the user make very fast two clicks on the check boxes, then this can cause a full page post back on updatepanel and this can lose the previous settings.

Resources