includes/modals/pixel_modal.php

<?php
function brivacia_install_url(): string {
    $https = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off')
        || (($_SERVER['HTTP_X_FORWARDED_PROTO'] ?? '') === 'https');

    $scheme = $https ? 'https' : 'http';
    $host = $_SERVER['HTTP_HOST'] ?? 'example.com';
    $dir = str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'] ?? '/'));
    $dir = $dir === '/' ? '' : rtrim($dir, '/');

    return $scheme . '://' . $host . $dir;
}

$installUrl = brivacia_install_url();
?>

<dialog class="modal" data-prism id="pixel-modal">
    <div>
        <h2><?= h(t('pixel.title', ['instance' => brivacia_setting('dashboard.instance_name', 'Brivacia')])) ?></h2>
        <p><?= t('pixel.help') ?></p>
        <p><?= t('pixel.help.server') ?></p>
        <p><?= t('pixel.variables') ?></p>

        <?php
        $totalSites = count(brivacia_sites());
        $siteNumber = 0;
        ?>

        <?php foreach (brivacia_sites() as $code => $domain): ?>
            <?php
            $siteNumber++;

            $siteCode = (string)$code;
            $siteLabel = (string)($domain ?: $code);

            $pixel = <<<HTML
<script>
(new Image()).src =
    '{$installUrl}/api/pixel.php?site={$siteCode}' +
    '&page=' + encodeURIComponent('PAGE_IDENTIFIER') +
    '&lang=' + encodeURIComponent('TRACKED_WEBSITE_LANGUAGE') +
    '&title=' + encodeURIComponent(document.title || 'PAGE_TITLE') +
    '&url=' + encodeURIComponent(location.pathname) +
    '&ref=' + encodeURIComponent(document.referrer || '');
</script>

<noscript>
    <img src="{$installUrl}/api/pixel.php?site={$siteCode}&amp;page=PAGE_IDENTIFIER&amp;lang=TRACKED_WEBSITE_LANGUAGE&amp;title=PAGE_TITLE&amp;url=/" alt="" height="1" width="1">
</noscript>
HTML;
            ?>

            <section>
                <header>
                    <h3><?= h(t('pixel.site')) ?> <?= h($siteLabel) ?></h3>

                    <?php if ($totalSites > 1): ?>
                        <span><?= $siteNumber ?>/<?= $totalSites ?></span>
                    <?php endif; ?>
                </header>

                <pre class="language-markup line-numbers match-braces" data-prismjs-copy="<?= h(t('ui.copy.code')) ?>" data-prismjs-copy-error="<?= h(t('ui.copy.code.error')) ?>" data-prismjs-copy-success="<?= h(t('ui.copy.code.success')) ?>"><code class="language-html"><?= h($pixel) ?></code></pre>
            </section>
        <?php endforeach; ?>

        <details>
            <summary><?= h(t('pixel.examples')) ?></summary>

            <p><?= h(t('pixel.examples.help')) ?></p>

            <ul>
                <li><strong>PHP</strong>
                    <ul>
                        <li>PAGE_IDENTIFIER → <code class="language-php">&lt;?= $pageId ?&gt;</code></li>
                        <li>TRACKED_WEBSITE_LANGUAGE → <code class="language-php">&lt;?= $currentLanguage ?&gt;</code></li>
                        <li>PAGE_TITLE → <code class="language-php">&lt;?= $pageTitle ?&gt;</code></li>
                    </ul>
                </li>
                <li><strong>WordPress</strong>
                    <ul>
                        <li>PAGE_IDENTIFIER → <code class="language-php">&lt;?php echo get_the_ID(); ?&gt;</code></li>
                        <li>TRACKED_WEBSITE_LANGUAGE → <code class="language-php">&lt;?php echo get_locale(); ?&gt;</code></li>
                        <li>PAGE_TITLE → <code class="language-php">&lt;?php echo wp_get_document_title(); ?&gt;</code></li>
                    </ul>
                </li>
            </ul>
        </details>
    </div>
</dialog>