Add customer payload as first script and adjust documentation

Author: DominikWolos

config/events.yaml

@@ -5,8 +5,3 @@ sylius_ui:
                 user_com_configuration:
                     template: '@BitBagSyliusUserComPlugin/UserApiResource/_userComCredentials.html.twig'
                     priority: 25
-        sylius.shop.layout.stylesheets:
-            blocks:
-                user_com:
-                    template: '@BitBagSyliusUserComPlugin/_userComScripts.html.twig'
-                    priority: 25

doc/installation.md

@@ -55,5 +55,10 @@
 6. Take advantage of channel based configuration of GoogleAnalyticsPlugin by adding :
     ```yaml
     spinbits_sylius_google_analytics4:
-        id: "%env(TAG_MANAGER_ID)%"
+      id: "%env(TAG_MANAGER_ID)%"
+      templateName: "@BitBagSyliusUserComPlugin/_userComScripts.html.twig"
+      enabled: true
     ```
+7. Add api credentials to your channel configuration in admin panel. If you decided to extend different object, please make sure that api credentials are set
+
+8. While integrating with User.com via GTM, you can use `user_com_customer_info` in browser console to check currently logged in customer data.

src/Trait/UserComApiAwareInterface.php

@@ -13,7 +13,12 @@
 
 interface UserComApiAwareInterface
 {
-    public function getId(): mixed;
+    /**
+     * To ensure compatibility with ResourceInterface, return type must be missing
+     *
+     * @phpstan-ignore-next-line
+     */
+    public function getId();
 
     public function getUserComUrl(): ?string;
 

templates/_userComScripts.html.twig

@@ -24,3 +24,29 @@
         {% endif %}
     </script>
 {% endif %}
+
+<!-- Google tag (gtag.js), plugin provided by Spinbits -->
+{% dump %}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ id }}{{ url_suffix|raw }}"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){window.dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '{{ id }}');
+    if (window.performance) {
+        gtag('event', 'timing_complete', {
+            'name': 'load',
+            'value': Math.round(performance.now()),
+            'event_category': 'JS Dependencies'
+        });
+    }
+    {% if app.session is not null and app.session.started %}
+    {% set events = app.session.bag('spinbits_ga4_events').all %}
+    {% for event, content in events %}
+    {% for c in content %}
+    gtag("event", "{{ event }}", {{ c|raw }});
+    {% endfor %}
+    {% endfor %}
+    console.log({{ events|json_encode|raw }})
+    {% endif %}
+</script>

tests/Application/config/packages/_sylius.yaml

@@ -24,3 +24,8 @@ sylius_channel:
         channel:
             classes:
                 model: Tests\BitBag\SyliusUserComPlugin\Entity\Channel
+
+spinbits_sylius_google_analytics4:
+    id: "%env(TAG_MANAGER_ID)%"
+    templateName: "@BitBagSyliusUserComPlugin/_userComScripts.html.twig"
+    enabled: true

tests/Application/config/packages/events.yaml

@@ -5,8 +5,3 @@ sylius_ui:
                 user_com_configuration:
                     template: '@BitBagSyliusUserComPlugin/UserApiResource/_userComCredentials.html.twig'
                     priority: 25
-        sylius.shop.layout.stylesheets:
-            blocks:
-                user_com:
-                    template: '@BitBagSyliusUserComPlugin/_userComScripts.html.twig'
-                    priority: 25