Set tracking in html

4 Options to Place the Analytics Tracking Code in the HTML [MiniTool Tips]

Where should the Analytics tracking code be placed in the HTML (Hypertext Markup Language) of a webpage for data collection? Generally, there are four options. Not all choices are suitable for you and you should pick one according to your condition. Read more related articles provided by MiniTool team.

Where should the analytics tracking code be placed in the html of a webpage for data collection?

  1. Right after the opening tag of your website
  2. Right before the closing tag of your website
  3. Right after the opening tag of your website
  4. Right before the closing tag of your website

Next, let’s analyze that question in detail.

About the Question

“Where should the Analytics tracking code be placed in the HTML of a webpage for data collection?” You may encounter this question when you try to set up your website with Google Analytics (GA) system to let GA monitor your webpage behaviors.

To enable the Google Analytics system to get control of the performance of your website, you have to place the GA tracking code on your website. In detail, you need to put the Google Analytics code into the HTML file of your webpages. Then, GA can collect data information on your web and create a traffic report of your pages for you.

Then, in the HTML of a webpage, where should the Analytics tracking code be placed for data collection?

[5 + 10] Best Free HTML to PDF / PDF to HTML Converters

How to convert HTML to PDF? What are the free HTML to PDF converters? How to convert PDF to HTML? What is the best PDF to HTML converter?

About the Answers

For the above question, there are usually four answers just listed in the above content. Let’s take a look at the 4 answers one by one.

The first answer means that you should put the Google Analytics tracking ID at the beginning of the tag of your website, very after the “”. The tag is the very start part of an HTML file. Therefore, it means that you need to put the GA tracking code at the beginning of the HTML file.

The tag in an HTML file usually includes the meta info (title, keywords, description, and URL), publish info (publish date, modify date, author name, etc.), and some other script details of the webpage. Those contents can’t be displayed on a normal page view.

The Opening Head Tag in HTML

The second answer says that you need to put your GA tracking code at the end of the tag; which is right before the closing tag.

The Closing Head Tag in HTML

The third answer for the question “Where should the Analytics tracking code be placed in the HTML of a webpage for data collection?” suggests you put the tracking code at the beginning of the tag, right after “” in the HTML.

The tag contains the main contents of a webpage and those contents are visible on normal page view.

The final answer tells that you are recommended to put your GA tracking code before the closing tag, at the end of the body part.

The Closing Body Tag in HTML

The above three screenshots are taken from one the of webpages of minitool.com, a website where you can get professional and reliable backup software, partition program, data recovery tool, and some multimedia applications.

After comparing those 3 pictures, you can find that the Google Analytics tracking code locates very before the closing tag in the second image for the MiniTool website. Yet, for other websites, their GA tracking code maybe after the beginning of the tag, after the beginning of the tag, or before the closing of the tag.

Google Analytics Tracking Code in HTML

How to Sep up Google Analytics Tracking ID?

Moreover, which option should you choose to place your tracking ID? It depends on your situation.

For Static Website

If your website is a static one, you should put the global site tag, a Google Analytics property containing the Tracking ID, before the closing tag on every page you want to measure. Just copy and paste the HTML ID there.

For Dynamic Website

If yours is a dynamic website that generates HTML using a programming languages or interfaces like Python or PHP. To collect data, you should include the global site data in the source code for every page you want to control.

Way 1. Use a Common Include or Template

  1. Copy your global site tag without editing and paste it into its include file.
  2. Link the include file so that the snippet appears before the closing tag on each webpage you plan to monitor.

Way 2. Rely on Analyticstracking.php File

  1. Copy your global site tag without editing and paste it into a file named “analyticstracking.php”.
  2. Include the analyticstracking.php file on each PHP template page.
  3. Add this code right after the opening tag for each template page: .

How to Save a Webpage as a PDF Within Seconds on Your PC?

How to save a webpage as a PDF? If you want to know, then you should read this post carefully. You can know how to do that on different browsers.

For Web-Hosting Service

If you are using a web-hosting service that you do not control the page code, you are able to rely on plug-ins provided by Internet service providers (ISP) or hosting platforms to automatically install Google Analytics on your webpages.

After setting up your global site tag. You may wonder whether it is working or not. To do so, just visit your website and check the real-time reports in GA to verify that your tracking is working. You can also make use of Google Tag Assistant to do the task.

About The Author

Helen Graduated from university in 2014 and started working as a tech editor in the same year. Her articles focus on video creation, editing, and conversion. She also has a good knowledge of disk management and data backup & recovery. Through an in-depth exploration of computer technology, Helen has successfully helped thousands of users solve their annoying problems.

Источник

Courier Tracking System in HTML CSS and JS

Today we will make a simple Courier Tracking System in HTML CSS and JS. This tutorial is important as it will teach you about the use of HTML CSS and JavaScript. We will also use SQL to save details within the browser itself. During the process, we will learn to use HTML dom manipulation, some CSS tricks, and the use of javascript with some SQL queries on top.

First, let’s see what we are going to develop in Courier Tracking System in HTML CSS and JS.

home page of Courier Tracking System in HTML CSS and JS about us contact us login register

Requirements:

  • Code Editor (VS Code Preferred)
  • Chromium Browser (Chrome Preferred)
  • Basic Knowledge of HTML, CSS, Javascript, and MySQL

The basic features will include:

  • Good UI for all the pages
  • Sign up
  • Login
  • Persisting Login state
  • Tracking Courier
  • Using SQL within the browser to save the user data

The folder structure of Courier Tracking System in HTML CSS and JS:

The folder will include 3 main files as shown in the image

folder structure

We will be using HTML, CSS, and JavaScript for developing Courier Management System Project.

It will be the barebones structure file that will shape how our contents are on the website

The styles file includes the alignment, aesthetics, and the basic overall look of how our website looks

The javascript files include all the logic, including the login and logout features, the dom-manipulation tricks, and essential functionalities to show the status of the shipment.

You can get the complete source code for Courier Management System Project in JavaScript at the end of the tutorial and before output video.

Coding Courier Tracking System in HTML CSS and JS

For registering the User We do the following DB query:

db.transaction(function (tx) < tx.executeSql( "SELECT * FROM RegistgeredUsers WHERE AND pwd = ?", [email, password], function (tx, result) < if (result.rows.length >0) < tx.executeSql( "CREATE TABLE IF NOT EXISTS LoggedInUser (id unique, pwd)" ); tx.executeSql("INSERT INTO LoggedInUser (id, pwd) VALUES (?, ?)", [ email, password, ]); window.location = "courier.html"; >else < alert("Please Check your Email and Password"); >> ); >); 

For Checking if the user is logged in:

 db.transaction(function (tx) < tx.executeSql( "CREATE TABLE IF NOT EXISTS RegistgeredUsers (id unique, pwd)" ); tx.executeSql( "SELECT * FROM RegistgeredUsers WHERE [email], function (tx, result) < if (result.rows.length >0) < alert("Email already registered."); return; >else < tx.executeSql( `INSERT INTO RegistgeredUsers (id, pwd) VALUES ('$', '$')` ); alert("Account Created Successfully , Now Please try logging in"); > >, function (tx, error) < alert("Error occurred."); >); >); > 

To logout the user we do run the following query:

HTML Code(index.html):

CSS code(style.css):

* < box-sizing: border-box; >body < font-family: "Montserrat", sans-serif; line-height: 1.6; margin: 0; min-height: 100vh; >ul < margin: 0; padding: 0; list-style: none; >h2, h3, a < color: #34495e; >a < text-decoration: none; >.logo < margin: 0; font-size: 1.45em; >.main-nav < margin-top: 5px; >.logo a, .main-nav a < padding: 10px 15px; text-transform: uppercase; text-align: center; display: block; >.logo a < color: rgb(255, 103, 2); font-weight: bolder; >.main-nav a < color: #5e4634; font-size: 0.99em; >.main-nav a:hover < color: #718daa; >.header < z-index: 1; position: fixed; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; border: 1px solid #a2a2a2; background-color: #f4f4f4; -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; >@media (min-width: 769px) < .header, .main-nav < display: flex; >> @media (min-width: 1025px) < .header < flex-direction: row; justify-content: space-between; >> .tracking-page < height: 100vh; padding-top: 15%; padding-left: 100px; background-color: #366fea; >.tracking-heading < text-align: left; color: rgb(255, 255, 255); text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 2em; margin-bottom: 0.5em; max-width: 400px; >.tracking-subtitle < color: rgb(255, 255, 255); width: 300px; >.tracking-input < padding: 1.5em 2.5em; border-radius: 15px; font-weight: 700; margin-right: 10px; width: 500px; >.tracking-button < padding: 1.5em 2.5em; border-radius: 15px; font-weight: 700; >.about-heading < color: rgb(255, 255, 255); text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 3em; >.about-subheading < color: rgb(255, 255, 255); text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 2em; margin-bottom: 0.5em; max-width: 600px; >.about-us < padding: 450px 0 450px 100px; background-color: #219b11; >.contact-us < color: white; padding: 150px 0 100px 100px; background-color: #04387c; >.skills < color: rgb(44, 17, 247); text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 700; >.contact < display: flex; justify-content: space-between; flex-direction: row; >.form-details < display: flex; flex-direction: column; margin: auto; text-align: center; padding: 60px; width: fit-content; border-radius: 30px; background-color: rgba(11, 177, 224, 0.82); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; >.form-details input, textarea < width: 100%; display: block; margin: 20px 13px; padding: 10px; font-size: 1.3em; outline: 2px solid #dfdfdf; border-radius: 15px; >.container < position: absolute; left: 40%; top: 10%; width: 80%; width: 300px; margin: 0 auto; margin-top: 150px; >.trackingPage, .detail < margin: auto; text-align: center; margin-top: 15%; padding: 60px; width: fit-content; border-radius: 30px; background-color: rgba(11, 177, 224, 0.82); box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; >.product-detail < text-align: left; color: rgb(163, 0, 0); >.product-detail h4 < margin-left: 50px; >.hidden < display: none; >.tabs < display: table-cell; width: 30%; background-color: rgba(130, 140, 142, 0.82); padding: 10px; text-align: center; vertical-align: middle; border: 2px solid #ffffff; border-bottom: 0px; position: relative; font-size: 1.3em; color: #ffffff; border-radius: 15px; >.tabs:hover, p < cursor: pointer; >#lt < background-color: rgb(12, 132, 189); >#cont < width: 100%; background-color: rgba(11, 177, 224, 0.82); border: 2px solid #ffffff; >input < display: block; margin: 20px 13px; padding: 10px; font-size: 1.3em; outline: 2px solid #dfdfdf; border-radius: 15px; >.chbk < margin-left: 60px; display: inline; >#clear < clear: both; >.comm < background-color: rgba(11, 177, 224, 0.82); padding: 30px; border-radius: 15px; position: absolute; visibility: hidden; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; >#login < visibility: visible; >h3 < display: table-cell; vertical-align: middle; padding: 10px 15px; font-size: 1.5em; color: #ffffff; >#forgot h3 < display: block; margin-top: 30px; text-align: center; >#forgot div < margin-top: 30px; >p < padding: 10px 15px; font-size: 1.3em; color: #ffffff; >.tracking-input < display: flex; flex-direction: column; >.btn

JavaScript code(main.js):

var db = openDatabase("mydb", "1.0", "Courier Management", 2 * 1024 * 1024); var emailArray = []; var passwordArray = []; var loginBox = document.getElementById("login"); var regBox = document.getElementById("register"); var forgetBox = document.getElementById("forgot"); var loginTab = document.getElementById("lt"); var regTab = document.getElementById("rt"); var currentUser = ""; async () => < await db.transaction(async (tx) => < await tx.executeSql( "SELECT * FROM LoggedInUser", [], function (tx, result) < if (result.rows.length == 0) < currentUser = ""; >else < currentUser = result.rows.item(0).id; document.querySelector( ".loginInButton" ).innerHTML = `Login`; > > ); >); >; function regTabFun() < event.preventDefault(); regBox.style.visibility = "visible"; loginBox.style.visibility = "hidden"; forgetBox.style.visibility = "hidden"; regTab.style.backgroundColor = "rgb(12, 132, 189)"; loginTab.style.backgroundColor = "rgba(130, 140, 142, 0.82)"; >function loginTabFun() < event.preventDefault(); regBox.style.visibility = "hidden"; loginBox.style.visibility = "visible"; forgetBox.style.visibility = "hidden"; loginTab.style.backgroundColor = "rgb(12, 132, 189)"; regTab.style.backgroundColor = "rgba(130, 140, 142, 0.82)"; >function forTabFun() < event.preventDefault(); regBox.style.visibility = "hidden"; loginBox.style.visibility = "hidden"; forgetBox.style.visibility = "visible"; regTab.style.backgroundColor = "rgba(130, 140, 142, 0.82)"; loginTab.style.backgroundColor = "rgba(130, 140, 142, 0.82)"; >function Registerwithdb() < event.preventDefault(); var email = document.getElementById("re").value; var password = document.getElementById("rp").value; var passwordRetype = document.getElementById("rrp").value; if (email == "") < alert("Email required."); return; >else if (password == "") < alert("Password required."); return; >else if (passwordRetype == "") < alert("Password required."); return; >else if (password != passwordRetype) < alert("Password don't match retype your Password."); return; >else < db.transaction(function (tx) < tx.executeSql( "CREATE TABLE IF NOT EXISTS RegistgeredUsers (id unique, pwd)" ); tx.executeSql( "SELECT * FROM RegistgeredUsers WHERE [email], function (tx, result) < if (result.rows.length >0) < alert("Email already registered."); return; >else < tx.executeSql( `INSERT INTO RegistgeredUsers (id, pwd) VALUES ('$', '$')` ); alert("Account Created Sucessfully , Now Please try logging in"); > >, function (tx, error) < alert("Error occurred."); >); >); > > function showLogin(event) < event.preventDefault(); document.querySelector("#container").classList.toggle("hidden"); >function login() < event.preventDefault(); var email = document.getElementById("se").value; var password = document.getElementById("sp").value; db.transaction(function (tx) < tx.executeSql( "SELECT * FROM RegistgeredUsers WHERE AND pwd = ?", [email, password], function (tx, result) < if (result.rows.length >0) < tx.executeSql( "CREATE TABLE IF NOT EXISTS LoggedInUser (id unique, pwd)" ); tx.executeSql("INSERT INTO LoggedInUser (id, pwd) VALUES (?, ?)", [ email, password, ]); currentUser = email; document.querySelector("#container").classList.add("hidden"); document.querySelector( ".loginInButton" ).innerHTML = `Logout`; > else < alert("Please Check your Email and Password"); >console.log(result.rows); > ); >); > function forgot() < event.preventDefault(); var email = document.getElementById("fe").value; if (emailArray.indexOf(email) == -1) < if (email == "") < alert("Email required."); return; >alert("Email does not exist."); return; > alert("email is send to your email check it in 24hr. \n Thanks"); document.getElementById("fe").value = ""; > function track(event) < event.preventDefault(); if (!checkLogin()) < alert("Please Login First"); return; >let trackingDetail = document.querySelector(".detail"); trackingDetail.classList.remove("hidden"); let trackingId = document.querySelector("#trackingId"); let productId = document.querySelector("#productId"); let productName = document.querySelector("#productName"); let productStatus = document.querySelector("#productStatus"); let product = < 123456: < id: "123432456", name: "iPhone 12", status: "Delivered", >, 456789: < id: "43543", name: "iPhone 11", status: "Out for delivery", >, 987654: < id: "987642", name: "iPhone 10", status: "Shipped", >, 654321: < id: "3245234543", name: "iPhone 9", status: "Cancelled", >, >; if (!product[trackingId.value]) < document.querySelector(".product-detail").innerHTML = "

No Product Found!
Check Your Details

"; return; > productId.innerHTML = product[trackingId.value].id; productName.innerHTML = product[trackingId.value].name; productStatus.innerHTML = product[trackingId.value].status; > function trackAnother(event) < event.preventDefault(); document.querySelector(".detail").classList.add("hidden"); >function logout() < db.transaction(function (tx) < tx.executeSql("DELETE FROM LoggedInUser WHERE [currentUser]); alert("Logged Out Sucessfully"); document.querySelector( ".loginInButton" ).innerHTML = `Login`; currentUser = ""; >); > function checkLogin() < if (currentUser.length >0) < return true; >return false; >

Output for Courier Tracking System in HTML CSS and JS:

I hope you loved building this project on Courier Tracking System in HTML CSS and JS, you can get the complete code here.

  • What is web development for beginners?
  • Music Recommendation System in Machine Learning
  • Blood Bank Management System Project In PHP
  • 100+ Java Projects for Beginners 2023
  • Chat App with Node.js and Socket.io
  • Draw Doraemon using HTML and CSS
  • Draw House using HTML and CSS
  • Draw Dog using CSS
  • Rock Paper Scissor in HTML CSS JavaScript
  • Pong Game in HTML and JavaScript
  • Tip Calculator in HTML and JavaScript
  • Calculator in HTML CSS JavaScript
  • BMI Calculator in HTML CSS JavaScript
  • Color picker in HTML and JavaScript
  • Number Guessing Game in JavaScript
  • ATM in JavaScript
  • Inventory Management System in JavaScript
  • Courier Tracking System in HTML CSS and JS
  • Word Count App in JavaScript
  • Test Typing Speed using Python App
  • Top 10 PHP Projects with Source Code
  • To-Do List in HTML CSS JavaScript
  • Tic-Tac-Toe game in JavaScript
  • Music player using HTML CSS and JavaScript
  • Happy Diwali in JavaSCript
  • Top 15 Machine Learning Projects in Python with source code
  • Top 15 Java Projects For Resume
  • Top 10 Java Projects with source code
  • Best 100+ Python Projects with source code
  • Gender Recognition by Voice using Python

Источник

Читайте также:  If chrome if firefox css
Оцените статью