PLANET-7575: Rename social media events (#2351)

* PLANET-7575: Rename social media events Ref: https://jira.greenpeace.org/browse/PLANET-7575 - Keep "uaevent" and add "page_shared" - Also add "channel" variable
greenpeace · Oct 16, 2024 · 9ee5294 · 9ee5294
1 parent 8675d38
commit 9ee5294
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 33 deletions.
diff --git a/assets/src/blocks/ENForm/ShareButtons.js b/assets/src/blocks/ENForm/ShareButtons.js
@@ -27,11 +27,21 @@ export const ShareButtons = ({social_params, social_accounts}) => {
   } = social_params;
 
   const share = (action, label) => {
-    window.dataLayer.push({
-      event: 'uaevent',
+    const shared = {
       eventCategory: 'Social Share',
       eventAction: action,
       eventLabel: label,
+    };
+
+    window.dataLayer.push({
+      event: 'uaevent',
+      ...shared,
+    });
+
+    window.dataLayer.push({
+      event: 'page_shared',
+      channel: action,
+      ...shared,
     });
   };
 

diff --git a/src/GravityFormsExtensions.php b/src/GravityFormsExtensions.php
@@ -282,6 +282,7 @@ public function p4_gf_custom_initial_settings(array $form, bool $is_new): void
             "gaeventlabel_thickbox" => "{form_title} ID: {form_id}",
             "gaeventgoalid" => "",
             "gaeventgoal" => "Submission: " . $form['title'],
+            "channel" => "",
             "gaeventcategory" => "",
             "gaeventaction" => "",
             "gaeventlabel" => "{form_title} ID: {form_id}",

diff --git a/templates/blocks/share_buttons.twig b/templates/blocks/share_buttons.twig
@@ -1,41 +1,38 @@
 {% block javascripts %}
-    <script>
-        window.addEventListener('DOMContentLoaded', () => {
-            if (typeof dataLayer === 'undefined') {
-                return;
-            }
-
-            const dataLayerPush = platform => dataLayer.push({
-                event: 'uaevent',
+<script>
+    if(!window.dataLayerPush) {
+        window.dataLayerPush = platform => {
+            const shared = {
                 eventCategory: 'Social Share',
                 eventAction: platform,
                 eventLabel: '{{ social.link }}',
-            });
-            window.dataLayerPush = dataLayerPush;
+            };
 
-            // If the native share functionality is not available on the device,
-            // we don't show the corresponding share button.
-            if (!navigator.share) {
-                return;
-            }
+            dataLayer.push({event: 'uaevent', ...shared});
+            dataLayer.push({event: 'page_shared', channel: platform, ...shared});
+        };
+    }
 
-            const nativeShareButtons = document.querySelectorAll('.share-buttons .share-btn.native');
-            nativeShareButtons.forEach(nativeShareButton => nativeShareButton.style.display = 'block');
+    // If the native share functionality is not available on the device,
+    // we don't show the corresponding share button.
+    if (navigator.share) {
+        const nativeShareButtons = document.querySelectorAll('.share-buttons .share-btn.native');
+        nativeShareButtons.forEach(nativeShareButton => nativeShareButton.style.display = 'block');
 
-            window.nativeShare = async () => {
-                try {
-                    await navigator.share({
-                        title: '{{ social.title }}',
-                        url: '{{ share_url ?? social.link }}',
-                        text: '{{ share_text ?? social.description }}',
-                    });
-                    dataLayerPush('Native');
-                } catch (err) {
-                    console.log(err);
-                }
-            };
-        });
-    </script>
+        window.nativeShare = async () => {
+            try {
+                await navigator.share({
+                    title: '{{ social.title }}',
+                    url: '{{ share_url ?? social.link }}',
+                    text: '{{ share_text ?? social.description }}',
+                });
+                dataLayerPush('Native');
+            } catch (err) {
+                console.log(err);
+            }
+        };
+    }
+</script>
 {% endblock %}
 
 {% set socialLink = (share_url ?? social.link) ~ '?utm_medium=' ~ utm_medium ~ utm_content_param ~ utm_campaign_param %}