Google Analytics cookbook

docs/cookbook/frontend/google-analytics.rst

@@ -0,0 +1,76 @@
+How to add Google Analytics script to shop?
+===========================================
+
+All shops need to observe movement on their websites, the most popular tool for that is Google Analytics.
+In Sylius we have few way to use it!
+
+Adding Google Analytics by past code directly in layout template.
+-----------------------------------------------------------------
+
+If you want to add Google Analytics by this way you need to override ``layout.html.twig`` in ``Resources/templates/bundles/SyliusShopBundle/``
+
+.. code-block:: twig
+
+    {# Resources/templates/bundles/SyliusShopBundle/layout.html.twig #}
+    {# ... #}
+
+    {% block metatags %}
+    {% endblock %}
+
+    {% block google_script %}
+        <!-- Google Analytics -->
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+            ga('create', 'UA-XXXXX-Y', 'auto');
+            ga('send', 'pageview');
+        </script>
+        <!-- End Google Analytics -->
+    {% endblock %}
+
+    {% block stylesheets %}
+    {% endblock %}
+
+    {# ... #}
+
+Adding Google Analytics using sonata events.
+--------------------------------------------
+
+If you want to add Google Analytics by sonata event you need to add new file, for example we create file ``googleScript.html.twig`` in ``Resources/templates``
+
+.. code-block:: twig
+
+    {# Resources/templates/googleScript.html.twig#}
+
+    <!-- Google Analytics -->
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+        ga('create', 'UA-XXXXX-Y', 'auto');
+        ga('send', 'pageview');
+    </script>
+    <!-- End Google Analytics -->
+
+Now, we need to configure a new service.
+
+.. code-block:: yaml
+
+    # config/packages/_sylius.yaml
+    app.block_event_listener.layout.after_stylesheets:
+        class: Sylius\Bundle\UiBundle\Block\BlockEventListener
+            arguments:
+                - 'googleScript.html.twig'
+            tags:
+                - { name: kernel.event_listener, event: sonata.block.event.sylius.shop.layout.stylesheets, method: onBlockEvent }
+
+
+Which way is better?
+--------------------
+It's depend how you customize your project, if you have layout overwritten by your custom layout, you should add google script directly in `head` section,
+otherwise we suggest you use sonata events.

docs/cookbook/index.rst

@@ -122,5 +122,6 @@ Frontend
     :hidden:
 
     frontend/admin-js-and-css
+    frontend/google-analytics.rst
 
 .. include:: /cookbook/frontend/map.rst.inc