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 auto-collects page metadata from the GTM data layer. Add a meta tag to your <head>:

<meta
    name="gtm-dataLayer"
    content='{"gtmStoryTitle":"My Article","gtmPageType":"article","gtmBspStoryId":"12345","gtmSiteName":"Example News","gtmCategory":"tech"}'
/>

Or pass metadata explicitly to track():

allegro.track('page_view', {
    content_id: 'article-123',
    content_type: 'article',
    publisher: 'Example News',
});

Complete Example​

<!DOCTYPE html>
<html>
    <head>
        <meta
            name="gtm-dataLayer"
            content='{"gtmStoryTitle":"My Article","gtmPageType":"article","gtmBspStoryId":"12345","gtmSiteName":"Example News","gtmCategory":"tech"}'
        />
    </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​