6

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...

  • 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 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? – William Smith Apr 3 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! – William Smith Jun 21 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 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 at 5:57
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.