Google Tag Manager Setup on SilverStripe | OpsBlu Docs

Google Tag Manager Setup on SilverStripe

Step-by-step Google Tag Manager installation and configuration guide for SilverStripe.

Implement GTM on SilverStripe to manage all marketing tags from a single interface.

Prerequisites

  • GTM Container ID (format: GTM-XXXXXXX)
  • SilverStripe CMS access

Template Integration

Step 1: Create GTM Include

File: themes/yourtheme/templates/Includes/GoogleTagManager.ss

<% if $SiteConfig.GTMContainerID %>
<!-- 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','{$SiteConfig.GTMContainerID}');</script>
<!-- End Google Tag Manager -->
<% end_if %>

Step 2: Add to Template

File: themes/yourtheme/templates/Page.ss

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$Title</title>
    <% include GoogleTagManager %>
</head>
<body>
    <% if $SiteConfig.GTMContainerID %>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={$SiteConfig.GTMContainerID}"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <% end_if %>

    $Layout
</body>
</html>

Step 3: Add to SiteConfig

File: app/src/Extensions/SiteConfigExtension.php

<?php

namespace App\Extensions;

use SilverStripe\Forms\FieldList;
use SilverStripe\Forms\TextField;
use SilverStripe\ORM\DataExtension;

class SiteConfigExtension extends DataExtension
{
    private static $db = [
        'GTMContainerID' => 'Varchar(20)',
    ];

    public function updateCMSFields(FieldList $fields)
    {
        $fields->addFieldToTab(
            'Root.Analytics',
            TextField::create('GTMContainerID', 'GTM Container ID')
                ->setDescription('Format: GTM-XXXXXXX')
        );
    }
}

Push Events to Data Layer

Form Submission

public function doSubmitContact($data, $form)
{
    // Process form...

    Requirements::customScript(<<<JS
if (window.dataLayer) {
    window.dataLayer.push({
        'event': 'form_submission',
        'formName': 'contact',
        'formId': 'ContactForm'
    });
}
JS
    );

    return $this->redirectBack();
}

Configure in CMS

  1. Log in to CMS
  2. Settings > Analytics
  3. Enter GTM Container ID
  4. Save

Next Steps


Additional Resources