Add push methods (which output before closing body tag) (#23)

* Use window.dataLayer and push data to it afterwards * Create dataLayer always, push data if set * Also add text/javascript to script tag * Nicer HTML * Add support for pushes that do not get into initial dataLayer - outputs before closing body tag * Fix README
xyNNN · Aug 24, 2017 · 989986c · 989986c
1 parent 9565a0b
commit 989986c
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## [2.3.0](https://github.com/xyNNN/GoogleTagManagerBundle/tree/2.3.0) (2017-08-22)
+
+[Full Changelog](https://github.com/xyNNN/GoogleTagManagerBundle/compare/2.2.0...2.3.0)
+
+**Implemented enhancements:**
+
+- Add support to push data to dataLayer that should not be in initial dataLayer in HEAD
+- Will insert pushes to dataLayer variable at bottom of HTML output to not block rendering
+
+## [2.2.0](https://github.com/xyNNN/GoogleTagManagerBundle/tree/2.2.0) (2017-08-21)
+
+[Full Changelog](https://github.com/xyNNN/GoogleTagManagerBundle/compare/2.1.0...2.2.0)
+
+**Implemented enhancements:**
+
+- Support to merge variables set on multiple locations in code
+
 ## [2.1.0](https://github.com/xyNNN/GoogleTagManagerBundle/tree/2.1.0) (2017-05-03)
 
 [Full Changelog](https://github.com/xyNNN/GoogleTagManagerBundle/compare/2.0.1...2.1.0)

diff --git a/EventListener/GoogleTagManagerListener.php b/EventListener/GoogleTagManagerListener.php
@@ -54,13 +54,20 @@ public function onKernelResponse(FilterResponseEvent $event)
             ->getExtension('google_tag_manager')
             ->renderBody($this->twig);
 
+        // render pushes before </body>
+        $templateBeforeBodyEnd = $this->twig
+            ->getExtension('google_tag_manager')
+            ->renderBodyEnd($this->twig);
+
         // Insert container immediately after opening <head> or <body>
         $content = preg_replace(array(
             '/<head\b[^>]*>/',
-            '/<body\b[^>]*>/'
+            '/<body\b[^>]*>/',
+            '/<\/body\b[^>]*>/',
         ), array(
             "$0" . $templateHead,
-            "$0" . $templateBody
+            "$0" . $templateBody,
+            $templateBeforeBodyEnd . "$0"
         ), $response->getContent(), 1);
 
         // update the response

diff --git a/Helper/GoogleTagManagerHelper.php b/Helper/GoogleTagManagerHelper.php
@@ -65,6 +65,14 @@ public function hasData()
         return $this->service->hasData();
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function getPush()
+    {
+        return $this->service->getPush();
+    }
+
     /**
      * {@inheritdoc}
      */

diff --git a/Helper/GoogleTagManagerHelperInterface.php b/Helper/GoogleTagManagerHelperInterface.php
@@ -40,4 +40,9 @@ public function getData();
      * @return bool
      */
     public function hasData();
+
+    /**
+     * @return array
+     */
+    public function getPush();
 }
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ Please be aware to insert into right after the HTML body tag!
 
 ```html
 <body>
-{{ google_tag_manager_body }}
+{{ google_tag_manager_body() }}
 ...
 </body>
 ```
@@ -76,11 +76,18 @@ And right after the HTML head tag:
 
 ```html
 <head>
-{{ google_tag_manager_head }}
+{{ google_tag_manager_head() }}
 ...
 </head>
 ```
 
+And right before the closing BODY tag:
+
+```html
+{{ google_tag_manager_body_end() }}
+</body>
+```
+
 Or use the `autoAppend` setting to let a kernel reponse listener add them to your layout automatically.
 
 Additional instructions: https://developers.google.com/tag-manager/quickstart
@@ -95,6 +102,14 @@ $manager = $this->get('google_tag_manager');
 $manager->setData('example', 'value');
 ```
 
+And if you want to add pushes at the end of the body (not in initial dataLayer):
+
+```php
+/** @var GoogleTagManagerInterface $manager */
+$manager = $this->get('google_tag_manager');
+$manager->addPush(['test' => 123);
+```
+
 ## Configuration
 
 ```yaml

diff --git a/Resources/views/tagmanager_body_end.html.twig b/Resources/views/tagmanager_body_end.html.twig
@@ -0,0 +1,7 @@
+{% if push is not null %}
+    {% for val in push %}
+        <script type="text/javascript">
+            window.dataLayer.push({{ val|json_encode|raw }});
+        </script>
+    {% endfor %}
+{% endif %}
diff --git a/Service/GoogleTagManager.php b/Service/GoogleTagManager.php
@@ -32,6 +32,11 @@ class GoogleTagManager implements GoogleTagManagerInterface
      */
     private $data = array();
 
+    /**
+     * @var array
+     */
+    private $push = array();
+
     /**
      * @param $enabled
      * @param $id
@@ -95,6 +100,22 @@ public function getData()
         return $this->data;
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function addPush($value)
+    {
+        $this->push[] = $value;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getPush()
+    {
+        return $this->push;
+    }
+
     /**
      * {@inheritdoc}
      */

diff --git a/Service/GoogleTagManagerInterface.php b/Service/GoogleTagManagerInterface.php
@@ -57,4 +57,15 @@ public function getData();
      * @return bool
      */
     public function hasData();
+
+    /**
+     * @return array
+     */
+    public function getPush();
+
+    /**
+     * @param $value
+     * @return void
+     */
+    public function addPush($value);
 }
diff --git a/Twig/GoogleTagManagerExtension.php b/Twig/GoogleTagManagerExtension.php
@@ -25,6 +25,7 @@ class GoogleTagManagerExtension extends Twig_Extension
     const AREA_FULL = 'full';
     const AREA_HEAD = 'head';
     const AREA_BODY = 'body';
+    const AREA_BODY_END = 'body_end';
 
     /**
      * @var GoogleTagManagerHelperInterface
@@ -58,6 +59,10 @@ public function getFunctions()
                 'is_safe' => array('html'),
                 'needs_environment' => true,
             )),
+            new \Twig_SimpleFunction('google_tag_manager_body_end', array($this, 'renderBodyEnd'), array(
+                'is_safe' => array('html'),
+                'needs_environment' => true,
+            )),
         );
     }
 
@@ -93,6 +98,16 @@ public function renderBody(\Twig_Environment $twig)
         return $this->getRenderedTemplate($twig, self::AREA_BODY);
     }
 
+    /**
+     * @param \Twig_Environment $twig
+     *
+     * @return string
+     */
+    public function renderBodyEnd(\Twig_Environment $twig)
+    {
+        return $this->getRenderedTemplate($twig, self::AREA_BODY_END);
+    }
+
     /**
      * @return string
      */
@@ -112,6 +127,8 @@ private function getTemplate($area)
                 return 'tagmanager_head';
             case self::AREA_BODY:
                 return 'tagmanager_body';
+            case self::AREA_BODY_END:
+                return 'tagmanager_body_end';
             case self::AREA_FULL:
             default:
                 return 'tagmanager';
@@ -132,7 +149,8 @@ private function getRenderedTemplate(\Twig_Environment $twig, $area)
         return $twig->render(
             'GoogleTagManagerBundle::' . $this->getTemplate($area) . '.html.twig', array(
                 'id' => $this->helper->getId(),
-                'data' => $this->helper->hasData() ? $this->helper->getData() : null
+                'data' => $this->helper->hasData() ? $this->helper->getData() : null,
+                'push' => $this->helper->getPush() ? $this->helper->getPush() : null,
             )
         );
     }