WP plugin Clarity Tracking (Lazy Load analytiky)

Update: v1.1. / 5. 2. 2024

Miniaturní plugin (ano, jde použít část kódu jako snippet taky) pro vložení MS Clarity na web.

Plugin funguje tak, že sleduje uživatelskou interakci „mousemove“ nebo se spustí 1x za 5000 ms (5 s). Minimalizuje tak dopad na PSI score. Měří dobře, nejsou však vyloučené nějaké případné odchylky (dejte echo co upravit).

Plugin při instalaci vytvoří vlastni DB tabulku „clarity_tracking“ a zapíše do ni tracking ID.

Celkově vzato, tento kód zajistí načtení sledovacího kódu od Clarity po první detekci akce od uživatele a následně ho bude načítat opakovaně pouze jednou každých 5 sekund.

Není to nic výjimečného, někomu se může hodit. Klienti si nestěžuji.

Popis hlavních funkcí pluginu Clarity Tracking (Lazy Loaded)

counter: Proměnná counter slouží k sledování, kolikrát byla akce (pohyb myší nebo posunutí stránky) detekována. Je to využito k určení, zda byl kód již spuštěn.
loadClarity(): Funkce, která načítá sledovací kód Clarity. Vytváří dynamicky <script> element, nastavuje jeho atributy (async, src) a přidává ho do hlavičky dokumentu.
checkAndLoadClarity(): Funkce, která kontroluje, zda byl kód Clarity již spuštěn. Pokud ne, spustí funkci loadClarity() a zvýší hodnotu counter.
document.addEventListener(„mousemove“, checkAndLoadClarity): Naslouchání na událost „mousemove“ (pohyb myší) a volání funkce checkAndLoadClarity().
window.onscroll = checkAndLoadClarity: Naslouchání na událost „scroll“ (posunutí stránky) a volání funkce checkAndLoadClarity().
setTimeout(checkAndLoadClarity, 5000): Nastavení časovače tak, aby za 5000 milisekund (5 sekund) zavolal funkci checkAndLoadClarity(). Toto je zde, aby se zajistilo, že sledovací kód bude načten i v případě, že uživatel neprojeví žádnou akci.

Níže stáhněte .ZIP a nainstalujte plugin klasickým způsobem.

Stáhnout můžete zde: Clarity Tracking (Lazy Loaded)

<?php
/*
Plugin Name: Clarity Lazy Load Tracking Plugin
Description: Add Clarity lazy load tracking code to your website with customizable Clarity ID.
Plugin URI: https://ffs.cz
Version: 1.1
Author: FFS.cz
Author URI: https://ffs.cz/blog/
License: GPLv3
Text Domain: clarity-llt
*/

// Aktivace pluginu - vytvoření databázové tabulky
register_activation_hook(__FILE__, 'clarity_tracking_plugin_activate');

function clarity_tracking_plugin_activate() {
    global $wpdb;

    $table_name = $wpdb->prefix . 'clarity_tracking';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        clarity_id varchar(255) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

// Přidání menu v administraci WordPress
add_action('admin_menu', 'clarity_tracking_plugin_menu');

function clarity_tracking_plugin_menu() {
    add_menu_page('Clarity Tracking Settings', 'Clarity Tracking', 'manage_options', 'clarity-tracking-settings', 'clarity_tracking_plugin_settings_page');
}

// Vytvoření stránky s nastavením
function clarity_tracking_plugin_settings_page() {
    ?>
    <div class="wrap">
        <h2>Clarity Tracking Settings</h2>
        <form method="post" action="">
            <?php
            if (isset($_POST['clarity_id'])) {
                // Zpracování formuláře po odeslání
                $clarity_id = sanitize_text_field($_POST['clarity_id']);
                save_clarity_id($clarity_id);
            }
            ?>

            <label for="clarity_id">Enter Your Clarity ID:</label>
            <input type="text" id="clarity_id" name="clarity_id" value="<?php echo get_clarity_id(); ?>" />
            <p class="description">Get your Clarity ID from your Clarity account.</p>

            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

// Funkce pro uložení Clarity ID
function save_clarity_id($clarity_id) {
    global $wpdb;

    $table_name = $wpdb->prefix . 'clarity_tracking';

    // Získej aktuální Clarity ID z databáze
    $existing_id = $wpdb->get_var("SELECT clarity_id FROM $table_name");

    if ($existing_id) {
        // Pokud Clarity ID existuje, aktualizuj ho
        $wpdb->update(
            $table_name,
            array('clarity_id' => $clarity_id),
            array('clarity_id' => $existing_id)
        );
    } else {
        // Pokud Clarity ID neexistuje, vytvoř nový řádek
        $wpdb->insert(
            $table_name,
            array('clarity_id' => $clarity_id)
        );
    }
}

// Funkce pro získání Clarity ID z databáze
function get_clarity_id() {
    global $wpdb;

    $table_name = $wpdb->prefix . 'clarity_tracking';

    $clarity_id = $wpdb->get_var("SELECT clarity_id FROM $table_name");

    return $clarity_id;
}

// Přidání sledovacího kódu do patičky stránky
add_action('wp_footer', 'add_clarity_tracking_code');

function add_clarity_tracking_code() {
    $clarity_id = get_clarity_id();

    if ($clarity_id) {
        ?>
<script type="text/javascript">
    // Sledovací kód s použitím Clarity ID
    !function() {
        let counter = 0;

        function loadClarity() {
            const windowRef = window,
                documentRef = document,
                clarityObjectName = "clarity";

            windowRef[clarityObjectName] = windowRef[clarityObjectName] || function() {
                (windowRef[clarityObjectName].q = windowRef[clarityObjectName].q || []).push(arguments);
            };

            const clarityScript = documentRef.createElement("script");
            clarityScript.async = 1;
            clarityScript.src = "https://www.clarity.ms/tag/" + <?php echo json_encode(esc_attr($clarity_id)); ?>;
            documentRef.head.appendChild(clarityScript);
        }

        function checkAndLoadClarity() {
            if (counter === 0) {
                loadClarity();
            }
            counter++;
        }

        document.addEventListener("mousemove", checkAndLoadClarity);
        window.onscroll = checkAndLoadClarity;

        setTimeout(checkAndLoadClarity, 5000);
    }();
</script>
        <?php
    }
}
?>

PHP