Setup

LiveMarket Components and Iframes ship with Google Tag Manager (GTM) integration, which is automatically enabled for the default dataLayer.

Setting up GTM on your site

In order to access the events data gathered, your website needs to have the web container set up.

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- Google Tag Manager -->
        <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:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
        <!-- End Google Tag Manager -->

        <title>Example Webpage</title>
    </head>
    <body>
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
                          height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->
    
        <!-- Content of your website -->
        <h1>Welcome to My Website</h1>
        <p>This is a sample paragraph on my webpage.</p>
    </body>
    </html>

Customizing the integration

Renaming the data layer

By default, the GTM integration looks for window.dataLayer to push the events to. This can be changed easily, by providing the window.LM_GA_DATA_LAYER variable with the corrent data layer name, like so:


<head>
    <script>
        window.LM_GA_DATA_LAYER = 'yourCustomDataLayer';
    </script>
    <!-- ... -->
</head>

Remember that there needs to be a web container with the specified dataLayer, as per the GTM documentation:

<!-- Google Tag Manager -->
<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:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','yourCustomDataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->

Disabling the integration

To disable GA integration entirely, you can simply provide the false value instead of a data layer name:


<head>
    <script>
        window.LM_GA_DATA_LAYER = false;
    </script>
    <!-- ... -->
</head>