I have the following code on a web page:
<a class="schedule-apt-btn" onclick="window.open('http://www.zocdoc.com/test');"> Appointment</a>
The URL that the window opens is populated dynamically and I want to be able to track clicks based on the URL. If the URL contains "zocdoc", i want to store that as one trigger. If the URL contains "hospital", I want to store that in another trigger.
How do I configure this? None of the preset event triggers (like Click URL) seem to work. Do i need to create a custom one? Any guidance would be great!
Enable the built in {{Click Element}} variable and then write a custom JS variable that return the onclick attribute (e.g. via {{Click Element}}.getAttribute('onclick')). You will probably have to disable "Check validation" if you use a link click trigger. The reason {{Click URL}} does not work is that there is no href, hence no click url (and on a link trigger that checks validation this would not be considered a valid link).
Related
I was wondering how can we track a click on a link sent via email using Google Tag Manager.
I mean, the user gets an email that contains an URL to our website, we would like to know if the user clicks on that link.
Is it possible to do it all just using the GTM console or do we have to add some extra code to fire up the event?
To be pedantic, you cannot track the "click" on the link since the mail itself does not contain tracking code or GTM code.
However you can append a parameter to the link (if you are using Google Analytics you should tag all of your links with campaign parameters in any case). Then you can check within GTM (e.g. via a url type variable with component type set to query string) if the parameter is present and then fire your tags accordingly.
I have page with multiple forms, which are hidden based on what link is active. One of these forms is using redactor and I want to send the user back to this page with the redactor form open on submit. By default the page refreshes on submit and it shows the default form for that page. I couldn't find anything about this in the docs. If anyone knows how to accomplish this please let me know. Thanks
To solve this you need to use window.location.hash with this you can send a hash variable to the URL when you click on the link to get to your form.
The urlHash works as follows:
var UrlHashVal = window.location.hash.substr(1); //get the hash value and store as a var
$('form').hide(); //hide all forms by default
$('form#' + UrlHashVal).show(); //show the form whose id matches the hash value
What this does is enable you to send a link to someone, like http://ucanstayatthe.ym.ca#myForm and it will open that page with form#myForm on display.
Now all we have to do is enable this urlHash to work within the page as well. On the page we show/hide the forms based on links. All we need to do is write the formID to the URL from the link. To do this simply add the fromID to your href eg. "#myForm". Now when you click that link it will display #myform at the end of the windowURL.
This solves all of the problems because now when the page refreshes on the Redactor submit, it will reload the URL including the hashValue that you have written to it. SO instead of reloading http://ucanstayatthe.ym.ca it will reload http://ucanstayatthe.ym.ca#myForm which in turn will show the correct from.
Bingo
Where should I put dataLayer creation code in the page? Is it mandatory to put it above the GTM snippet?
Where should I call the dataLayer.push() function? Should it always be put in the code were the dataLayer creation code is placed like below?
<script>
dataLayer=[{‘Pcategory’:’login’,‘Pno’:1}],
dataLayer.push({‘Pcategory’:’login’,Pno:1});
</script>
Is it mandatory to declare an event for each dataLayer we push?
Is it mandatory to declare the dataLayer before we call dataLayer.push() function or does GTM provide a built in dataLayer?
Where should I put the code below? If I want declare it, how can I do it?
Click Here...
You need to initialize the dataLayer above the GTM snippet. You need to put all information there that is supposed to be available on page load (the GTM snippet on page load can only access stuff that preceded the tag managenemt script). If you do not need custom data on page load the dataLayer might be empty. You still need to declare, else the push later on will fail.
You use a push when you want to add data after page load, e.g. if you want to respond to user interactions.
You do not need to add custom events to clicks or form submissions, since GTM has what's called auto-eventhandlers (i.e. the necessary javascript to respond to clicks is already part of the GTM script).
You need a custom event if you want to trigger tags on user interactions that are not clicks or form submits (or timers). E.g. if you run a javascript function and you need to trigger tags dependening on the result the function can push a custom event per possible result to the dataLayer, and you can fire tags accordingly.
For your example you might, for example, set up a click based trigger; if the link text is unqiue you could set the a pageUrl Variable based on the link text (which is automatically available via the {{Click Text}} variable if you use a click trigger). So for that example you would not have to use any custom code at all, you can simply use what GTM provides.
I'm trying to track form submissions by creating a data element and rule in Adobe DTM. I'm new to DTM and am having difficulty configuring the tag correctly. Here's a screenshot of my code: http://zeffective.d.pr/1hTHa. How should I create this rule in DTM to track email form submissions as an event in GUA (I've created a tool for GUA in DTM already).
There are several ways to do this (jQuery form submit, etc) but using an event-based rule should work just fine.
Something like this:
Event Type: Click
Element Tag or Selector: button.form-submit.disabled-submit // class name
Apply Event Handler Directly to Element
// Adobe Analytics Section
// Select s.tl (does not increment a PV)
// Set events or vars
You can also do this with a page rule that uses jQuery and listens for the form.submit.
Hope this helps.
Best way to set it up correctly is:
create event base rule,
chose event type click and check option delay link activation (this will avoid page reload before analytics call is made).
Apply event handler directly to element - leave this option unchecked.
Please do not set any other conditions as mentioned in comments above.
Choose analytics tool set s.tl and map your evars/props/events
Also, please check _sattelite.getVar("data element name") function to check that Data Elements are resolved properly.
Use browser addons like omnibug to check that calls are made as expected.
In section Javascript / Third Party Tags, for testing purposes you can add following java script:
console.log('new submission');
hope it helps.
If you have form validation happening I would not use an on click event in DTM. For form submissions, my preferred method is to use the form onsubmit handler and fire a direct call event to DTM after any other logic / validation happens.
_satellite.track('lead_form_submit');
Set up all your tracking logic in a Direct call rule that has a string to match what you pass to track. ie. 'lead_form_submit' or whatever you name it.
I am looking for a way to wire up an ASP:LinkButton to appear as a link but in the background (100% in the code behind, no dummy pre-filled form in the markup) do a form post (target=_blank). I have a form action, method and parameters to pass that I will query for in the "click" event of the LinkButton. What is the best way to accomplish this?
Well there are LOTS of ways to do what i think you are trying to do :)
One problem; standard pop-up's don't fire event handler calls as they are mapped via post-back to the page i believe.
If you are happy with GET only submissions:
OPTION A:
Add your link button with no target set and setup a post back event handler for click
setup your URL and pass it back to the page into a JS function that will load right away eg or use jquery etc.
in the JS function you load the URL using window.open() with the target set to "_blank"
EFFECT:
User clicks the link, all code is server-side that works out the URL to show, page refreshes back to where it was and a popup window then loads showing the new URL
OPTION B:
Setup the link to have target="_blank"
make it call a new page or the same page with a querystring argument you can pre-process in the page_load()
in the new page or controlling block of code, do your calculations and Response.Redirect() to the new target
EFFECT:
User clicks the link, no page refresh just a new popup right away with a redirect to the new page. This is a cleaner solution i think!
IF you need POST support:
Dynamically create either elements or a string of HTML representing a form with all the needed input elements and output it into the popup window (using option b as a rough start template) and have a onload submit the form right away which will perform a POST to the URL you decided via server-side script giving the same effect as option b but with a form level POST.