Skip to main content

Quick Start

This guide walks you through adding the Allegro SDK to your site and sending your first custom event.

1. Add the Script Tag​

Add the Allegro loader to the <head> or before </body> of your HTML:

<script src="https://your-allegro-instance.com/client.js"></script>

Replace your-allegro-instance.com with your actual Allegro domain.

2. Track a Custom Event​

Page views are tracked automatically. To track a custom event, initialize the queue and push a callback:

<script>
    window.allegro = window.allegro || [];

    window.allegro.push(function (allegro) {
        allegro.track('article_share', { method: 'email' });
    });
</script>

3. Setup Page Metadata​

The SDK automatically collects page metadata from application/ld+json structured data on the page. Add a JSON-LD block to your <head>:

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "City Council Approves New Housing Plan",
        "identifier": "story-12345",
        "publisher": {
            "@type": "Organization",
            "name": "Example News"
        },
        "articleSection": "Local Government"
    }
</script>

The SDK maps these fields to its own automatically. You can also source metadata from <meta> tags, a GTM data layer, or CSS selectors — see the Page Metadata guide for all field mappings and source types.

Or pass metadata explicitly to track():

allegro.track('page_view', {
    content_id: 'story-12345',
    content_type: 'NewsArticle',
    publisher: 'Example News',
});

Complete Example​

<!DOCTYPE html>
<html>
    <head>
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "NewsArticle",
                "headline": "City Council Approves New Housing Plan",
                "identifier": "story-12345",
                "publisher": {
                    "@type": "Organization",
                    "name": "Example News"
                },
                "articleSection": "Local Government"
            }
        </script>
    </head>
    <body>
        <script>
            window.allegro = window.allegro || [];

            // Track a custom event (queued until SDK loads)
            window.allegro.push(function (allegro) {
                allegro.track('article_share', { method: 'email' });
            });
        </script>

        <script src="https://your-allegro-instance.com/client.js"></script>
    </body>
</html>

Next Steps​