GA

What is theGA

GA (Google Analytics), Google Analytics, provides tools for centralized analysis of business-related data for free.

GAThe role of

Free apis are available to help collect, configure, and report data about users’ interactions with web content.

GTM

What is theGTM

GTM (Google Tag Manager), Google Trace Code Manager provides simple, reliable, and easy to integrate code management for free. GTM allows the trace code manager to trigger code through JavaScript or iframe(when JavaScript is not available).

GTMThe role of

Manage all code without modifying it.

advantage

  • free
  • Free, and a wealth of features!Copy the code
  • flexible
  • Trigger conditions can be set based on various user behaviors to trigger specific tag code.Copy the code
  • Easy to deploy
  • After creating the trigger condition and label, click the "Publish" button to Publish.Copy the code
  • Version control
  • A new release is created and documented for each release and can be easily restored to a particular release.Copy the code
  • Easy integration
  • Support and integrate all Google and third-party tracking code. GA can be combined to track user behavior within the site.Copy the code

Use:The official documentation

in<head>add

<script>
    (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l ! ="dataLayer" ? "&l=" + l : "";
        // Asynchronous JavaScript does not affect page parsing
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id="+ i + dl; f.parentNode.insertBefore(j, f); }) (window.document."script"."dataLayer"."GTM-XXXX");
</script>
Copy the code

in<body>add

Use iframe in web pages that do not support JavaScript

<! -- Google Tag Manager (noscript) --><noscript>
    <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
    >
    </iframe>
</noscript><! -- End Google Tag Manager (noscript) -->Copy the code

Working principle:

The Google Trace code manager is asynchronous code that executes without blocking other elements from appearing on the page. It also causes other code deployed through The Google Trace code Manager to be deployed asynchronously, meaning that if code loads slowly, it doesn’t interfere with other trace code.

Asynchronous syntax is implemented using dataLayer objects. This object acts as a queue, using a first-in, first-out data structure to collect THE API calls from which the code is triggered. To add content to the queue, use the datalayer.push method. With the datalayer.push method, you can pass additional metadata to the Google trace code manager via variables and specify related events.

You can specify that a dataLayer object is created before the Google Trace code manager snippet, or you can have the Google Trace Code Manager create a dataLayer object if it has not already been defined.