JavaScripts for the Internet marketer
A wildly large introduction
To start collecting data for analytics, you usually need to put code on the elements you are interested in. For example, there is some <input> where your customer has to enter data. You need to know if they notice this form right away, if they fill it out or skip over it, if they fill it out correctly, and so on. To find out all this for this tag, you insert analytics code on the event. For example, <input onclick=”code_analytics”>.
As a result, you need to edit the code of the site to be able to analyze the data collected from the site. And if you work for a large organization, such as a bank, then editing the site code will not be an easy task for you. Often Internet marketers have a topic of struggle with the web-programmers/executives is not the last. The former need to “quickly” implement the analytics code on the necessary elements, the latter are constantly dopilivayut something and optimize, not considering it important to give their precious time to insert the alleged “unnecessary / unimportant” analytical system.
Now, of course, everything is changing, and analytics is slowly creeping into first place in importance, and then, based on it and hypotheses, programming. But many are still dissatisfied with this state of affairs.
The solution to this problem between web programmers and Internet marketers is Google Tag Manager. It is not for nothing that it is tacitly called the first and most important tool of an Internet marketer. Its main task is to create a container on the site, in which without the participation of webmasters you can insert existing analytics systems or write your own javascript-code.
About the first option with the already available analytics tools I described the situation in detail in my previous article: How to organize ABn testing through Tag Manager.
So now I needed to write my own analytics code, without a single reference to web-programmers, and editing the code of the site.
The third-party analytics system we’re working with is called Amplitude, it provides its main code (SDK), which should be put in the header of the site, as well as triggered on various events in the form of a small line. Of course, we already know from the previous article that you can listen directly from the container to events and perform certain functions. But when it comes to third-party analytics system which doesn’t work with Google Tag Manager — you have to use your own scripts, which even the most advanced internet marketer might not know. This is what we’re going to talk about. Below I give you all the necessary JavaScript’s which can listen to the events of the site directly from the container of Google Tag Manager.
JavaScripts for the Internet marketer
First you need to figure out what events you want. There are these:
- onchange — triggers after fixing the result in the input field, after loss of focus
- oninput — is triggered every time the field is changed
- onclick — left-click on the element
- onload — document is downloaded
- onunload — closing the window (body)
If an item has its own ID
document.getElementById("ID").onclick = function() {
// Here you insert the function of your analysis system, in my case it is Amplitude
amplitude.getInstance().logEvent('Event_name_log');
};If the item has no ID, but a class
document.getElementsByClassName("сlass")[0].onclick = function() {
amplitude.getInstance().logEvent('Event_name_log');
};Zero in square brackets means the very first element on the page with the corresponding class name. If you remove it, the onclick event will be triggered on all elements that contain the corresponding class name. By the way, it doesn’t matter if the element contains any other class names.
Unlike getElementById, which only works within the document, the getElementsByClassName method can work within the document as well as any other DOM element. So we can use this method to call an element and listen to it through its parent element affiliation. Below is an example of referring to the first element [0] with the class “example-class” through its nesting in the element with id=”exampleID”
document.getElementsById("exampleID").getElementsByClassName("example-сlass")[0].onclick = function() {
amplitude.getInstance().logEvent('Event_name_log');
};If an item has nothing
If the element has no defining parameter, for example there is just a link <a href=”#”></a>, in this case the getElementsByTagName("tag") method comes into play.
Like the getElementsByClassNamemethod, the getElementsByTagName method can act within document as well as within any other DOM element. So we can use this method to refer to an element and listen to it through its parent affiliation.
The example below shows that we access the second tag <input type=”number”>, knowing that it is nested inside a table with the “classA” class.
<table class="classA">
<tr><td><input type="tel"></td></tr>
<tr><td><input type="number"></td></tr>
</table><script>
document.getElementsByClassName("classA")[0].getElementsByTagName("input")[1].onclick = function() {
amplitude.getInstance().logEvent('Event_name_log');
};
</script>
The getElementsByTagName method can search within any element.
These scripts can break the site!!!
It is very important to understand that the scripts above work as follows: They find the necessary element and assign the necessary function to the specified event, while removing all functions assigned to it. Thus, all those functions that have been assigned by web-programmers in the code of the site, simply replaced by your functions. This is unacceptable!
There is a slightly different method that won’t remove previously assigned functions from the element, but will add them. And this method is written as: addEventListener("click", functionName);, where instead of click you can write any other event, instead of functionName you specify function name. By the way, notice that in this method event is designated as click and not as onClick.
It works as follows:
<div class="center">
<li>button Facebook</li>
<li>button Twitter</li>
<li>button VK</li>
</div><script>
document.getElementsByClassName("center")[4].getElementsByTagName("li")[1].addEventListener("click", clickTwitter);
function clickTwitter() {
amplitude.getInstance().logEvent("clickTwitter");
};
</script>
From the example you can see that we find the 5th <div> with class=”center” and apply to the 2nd enclosed <li> element and add to it the onClick event, which in turn, if it happens, the clickTwitter function is executed.
That’s it!
