Google Analytics cookbook

docs/cookbook/frontend/google-analytics.rst

@@ -0,0 +1,77 @@
+How to add Google Analytics script to shop?
+===========================================
+
+All shops tend to observe traffic on their websites, the most popular tool for that is Google Analytics.
+In Sylius we have a few ways to enable it!
+
+.. note::
+    Which way is better?
+    It depends on how you customize your project, if you have the Sylius layout overwritten by your custom layout,
+    then you should add script directly in `head` section of the layout template,
+    otherwise, use the Sonata events.
+
+Adding Google Analytics by pasting the script directly into the layout template.
+--------------------------------------------------------------------------------
+
+If you want to add Google Analytics by this way, you need to override the ``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 script with Sonata events.
+--------------------------------------------------
+
+If you want to add Google Analytics by sonata event you need to add a new file, create the 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 }
+

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