We Keep Coding

How to track a button click using a custom <img> tag in Google Tag Manager

I received a custom tag by a marketing firm to place on a Wordpress site for tracking clicks on certain buttons. I am using the Elementor page builder on the site and have given each button a unique button ID. I am new to Google Tag manager by the way. From my understanding, I would need to use the custom html tag option so that I can use the marketing firm's custom tag with their tracking code. When creating the custom html tag in GTM, I'm presented with html box and am stuck as to how to get the tracking code to fire. I've set up the trigger to correspond with the button ID but that isn't enough. Here's what I've tried:
I've tried just entering (see below) in the HTML field: (the example is for the newsletter button). I thought maybe there is some "magic" that tag manager uses to build the event listener but I couldn't get anything to fire.
'''<noscript><img src="https://tags.srv............." width="1" height="1"/></noscript>'''
Next I tried to inject something like this to no avail (see my note as I was guessing here):
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#newsletter_send_button a').click(function(){
//tracking code here
//for example Facebook Pixel:
fbq('trackCustom','newsletter_send_button'); <<<HERE IS WHERE I'M UNSURE
OF WHAT TO PUT IN.>>>
</scipt>
<noscript>
<img src="https://tags.srv...................."
width="1"
height="1"/>
</noscript>
Google tag manager is installed on the site. I see my universal tag firing so I know I'm good. Now how do I add this custom tracker to individual buttons on the site? Maybe I'm headed in the wrong direction but I think I have to use the Custom HTML option in Google Tag Manager because the tracker info is being sent to the marketing agency and not the business's individual GTM account. I'm just at a loss. I "think" the tracker is a Facebook pixel because of the tag (just guessing here). Any ideas?

In case anyone else runs across this thread, I as able to get it to work. If a 3rd party agency (marketing) sends you a img pixel, use the Custom Image tag in Google Tag Manager and input only the URL (no img tag or height/width) in the Image URL area and leave Cachebusting on. Sounds simple after you figure. Also, if you are using Elementor forms and are looking to fire the tag based on a successful form submission, one word of recommendation is to create a separate redirect page and set the trigger to be the page url of the redirect page. You can use the div.elementor-message-success css tag as the element trigger but that works for all successful form submissions and getting GTM to read the form ID after the submit button has been clicked didn't work for me hence why I just used the redirect url as the trigger.

Have a Google Form set the title to the users email

I'd like to make a Google Form that I can email to multiple people and when they open the form to fill it out, the title will be replaced with their email.
I've tried the onOpen() trigger and from what I understand it doesn't act the way its name suggests.
Is there a way to do this?
Thank you so much!
Ben

onOpen triggers when the form is opened for editing by the developer (you), not for submission by the end users (see this question).
I don't know of a way to do what you want. The closest I can think of is using apps script to generate the same form over and over again from a list of email addresses. But then you'd have to send a different form to each person, which I'm guessing isn't going to work for you.

Adding onsubmit to a form via javascript

How would you go about inserting an OnSubmit attribute to a form via Javascript only?
I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!
Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.
Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.
I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:
onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"
However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.
Partial Solutions (need your help to finish this up):
Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.
I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);"
(source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)
The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">
Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.

window.onload = function() {
var form = document.getElementById('hosted_payment_form');
form.onsubmit = function() {
_gaq.push(['_linkByPost', this]);
}
}
I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.

Google Docs - Autopopulate live form

i have a webpage that host events (example: http://www.mysite.com/test/events/5493.html) that page holds information such as event title and other info, using google docs i've created a form that fills out my spreadsheet (survey)
The issue is that how can i get the event information from "5493.html" and autopopulate the fields that i set up on the google docs form (live form)
Event Name: [auto populate from the "5493" page]
Date of Event: [auto populate from the "5493" page]
Please rate:
question:
question
[submit button]
What i want to do is to send the link (live form link) and when someone else wants to fill out the googel survey form, those 2 fields are auto-populated to avoid typo mistakes.
i know there is a way to manually modify the link however are there any automated options???
Thank you!!

Looks like google docs now supports it.
See: https://support.google.com/docs/bin/answer.py?hl=en&answer=160000

How to set up Google Analytics goal tracking of a contact form with no separate thank you page?

How do I set Google Analytics up to track visitors to my website who have submitted a contact form, that doesn't have a separate thank-you url?
Ive seen the code posted around blogs and GA help forums but so far have yet to come across how would I actually set the goal up in order to insert the snippet of code.
Code found on forums and such:
onsubmit="pageTracker._trackPageview('/Goa1-Button'); pageTracker._trackEvent('Goals','CLick-Button');"
Specifically, I would like to know things such as:
What goal type would I use?
If i named the campaign Contact form completions, where would it go and fit in to the code above?
Is the code above right and will it help me?
Any other advice, any one ever had to do this before?

So it looks like from the URL you posted in a comment on yahelc's answer, that you have a form that submits and gives back a response via AJAX.
Also, your on-page GA code is the async version, but the code you have in your question is the traditional, so you need to use the async syntax.
On your page, if the visitor does not fill something out, the area in question gets highlighted in red (sidenote: I see no "you need to fill this out" or "this is the correct format" messages if I do not fill out the form correctly..you should look into adding that...).
The main thing you need to make sure is that you only pop the 'success' code if the visitor successfully fills out the form. So you don't really want to attach the GA code to the onsubmit because this can produce false positives..it will trigger whenever the visitor clicks the submit button, regardless of whether or not they successfully filled out the form.
So it looks like the javascript that handles form validation is in your /custom.js, and you have on line 163 of custom.js viewsource the following:
success: function(response){
jQuery(".ajax_form").before("<div class='ajaxresponse' style='display: none;'></div>");
jQuery(".ajaxresponse").html(response).slideDown(400);
jQuery(".ajax_form #send").fadeIn(400);
jQuery(".ajax_form input, .ajax_form textarea, .ajax_form radio, .ajax_form select").val("");
}
});
This looks to be where the "thank you" message is displayed, after the form has been validated and submitted, so you should put your GA "success" code somewhere in this function.
The code you will want to insert should look something like this (based on the code in your question):
_gaq.push(['_trackEvent', 'Goals', 'CLick-Button']);
_gaq.push(['_trackPageview','/Goa1-Button']);
NOTE: For the event tracking, this will set the event category to "Goals" and the event action to "CLick-Button". There are other optional arguments you can pass to the _trackEvent for further granularity. Refer to GA's event tracker guide for more details.
As for the goal tracking, as yahelc mentioned, this is setup within the interface. The code above will send a virtual page view with a page name of "/Goa1-Button" and you will use this value in setting up your goal. There are a lot of ways you can set it up the goal. You can make it exactly match that value or start with that value if you anticipate URL params being added to it later, etc...(but also note, you cannot currently create goals based on events...which is lame, but I hear GA is working on making that happen eventually).
edit: Apparently you actually can set goals based on events, if you use the "New Version", as mentioned by yahelc in his answer comments. Nice!

Goals are configured from within the Google Analytics interface, and do not apply retroactively.
You should check out How do I set up goals and funnels?
You can specify a specific page, event or amount of time on site as your goal.
As far as how to configure the code that will track submission of your form, that requires more information (i.e. code samples) to help you with. But, most importantly: Is it an AJAX form, or a regular form that just posts to the same URL? Are you using async or traditional Google Analytics syntax?
EDIT:
Based on the form you just posted, it looks like its an AJAX POST that returns an HTML body.
So, all you need to do is add your "goal" code into that markup, something like:
<script>
_gaq.push(["_trackPageview", "/contact-us"]); //for a URL goal
_gaq.push(["_trackEvent", "Contact Us", "Submit"]); //for an event goal.
</script>