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”>.

JavaScripts for the Internet marketer

First you need to figure out what events you want. There are these:

  1. oninput — is triggered every time the field is changed
  2. onclick — left-click on the element
  3. onload — document is downloaded
  4. 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');
};
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.

<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>

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!

<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>

UI designer who codes on a freelance basis. I’m on my way to become a UX (Product Designer) in a large company.

UI designer who codes on a freelance basis. I’m on my way to become a UX (Product Designer) in a large company.