8

I've managed to import the Google Tag Manager code into the using the lightning community settings tab. This loads perfectly fine and I can see the 'preview' window for google tag manager.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

However, when I try to access the 'dataLayer' or 'window.dataLayer' object in a lightning component controller, it appears as undefined. I understand this is due to the SecureWindow that has been implemented.

For example:

addCourseToCart : function(component, event, helper) {
  dataLayer.push({
    'event': 'addToCart',
    'ecommerce': {
      'currencyCode': 'EUR',
      'add': {                                // 'add' actionFieldObject measures.
        'products': [{                        //  adding a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
         }]
      }
    }
  });
},

Is there still no way at all I can access the dataLayer using lightning communities and components? If not, this unfortunately makes it a nightmare for my customer to track in-depth interactions on their community... I'm surprised Salesforce have overlooked this...

10
  • 1
    Did you try to put this in a visualforce page load it there and get the data you need through events from lightning component?
    – RedDevil
    Apr 2, 2019 at 18:34
  • @RedDevil I'm not sure I follow what you mean exactly. I think I could probably run an iframe that contains a visualforce page that runs the google tag manager. I wanted to try to avoid that because it makes everything more complicated than it should be... Is that what you meant? Apr 3, 2019 at 13:26
  • 1
    @Sarang : Unfortunately I was unable to. We ended up going down a different route with the customer (although they were quite disappointed). It does work in the console, but when run in the context of lightning it doesn't work. If you could give that a try and let me know the result it would be very helpful! Jun 21, 2019 at 14:19
  • 1
    @WilliamSmith : Raised a case with Salesforce. Let's see what they come back with. I will keep this post updated. Thanks!
    – Sarang
    Jun 21, 2019 at 15:28
  • 1
    Yes, they clearly said that GTM and lightning integration is not supported currently and that it is a "product limitation" as of now. Thanks for bringing this up, I had forgotten to update it here.
    – Sarang
    Jul 23, 2019 at 5:57

4 Answers 4

2

As per current updates from Saleseforce support, GTM and lightning integration is not supported currently and that it is a "product limitation". OP please if you could mark this as final answer and close this.

1

Looks like you're trying to set Custom Event Parameters to Google Tag Manager. I was trying to use analyticsInteractionGtag but noticed it would only receive the event and none of the parameters.

I solved this by sending events from my LWC component to LWC pubsub component. I embed the pubsub component into an Aura component set at API 39. Setting it at 39 avoids issues with Lightning Locker Service. From that component I listen for the events and I'm able to access the window.dataLayer without a problem.

Here's some example code:

googleTagManagerHandler.cmp

<aura:component description="googleTagManagerHandler" implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" action="{!c.isInit}" value="{!this}"/>

    <div class="analytics">

        <c:pubsub aura:id="pubsub" />

    </div>
</aura:component>

googleTagManagerHandlerController.js

({
    isInit: function(component, event, helper) {
        component.find('pubsub').registerListener('gtmEvent', $A.getCallback(function(detail) {
            if (window.dataLayer) {
                window.dataLayer.push(detail);
            } else {
                console.error('No GTM dataLayer found.');
            }
        }));
    }
});

googleTagManagerHandler.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>39.0</apiVersion>
    <description>googleTagManagerHandler</description>
</AuraDefinitionBundle>

Hope this helps.

1

I was just trying the following and it seems to be working (further testing needed.)

  1. in the Lightning component controller (or helper) add the following script to the function/event you want to tag.
document.dispatchEvent(new CustomEvent("updateGTMdataLayer", { "detail" : { event: "[eventName]"} }));

This will send an event that can be caught by the community page. Identify the event (ex: updateGTMdataLayer) and create a JSON with the details you want to pass.

  1. Edit the community HEAD Markup with the following script:
<script>
    document.addEventListener('updateGTMdataLayer', function(e) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'gtm.start': new Date().getTime(),
            'event': e.detail.event
        });
    });
</script>

Catch the event sent by the Lightning Component, parse the JSON and update the DOM dataLayer.

I hope it makes some sense. :)

0

Why you don't try to pass the dataLayer as an argument to the function? However, You have to be sure that at the point of calling that function the dataLayer has already been defined, otherwise will still be undefined

addCourseToCart : function(component, event, helper, dataLayer) {}

You can add the line to the beginning to the function to open the debugger. Recall use F12 to open the web inspector/dev tools before refreshing the page.

 debugger;

If the dataLayer object is not present then that means the function is running before the GTM library is loaded. Just be sure the GTM library is loaded first then.

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .