0

I am trying to implement Google tag manager in my React Web App but facing an issue due the circular structure of SVGSVGElement

enter image description here

I have added some custom SVG icons in my component using

import {ReactComponent as TrashIcon} from 'images/trashcan.svg';

But whenever I click on this icon, the GTM script throws the error above and does not track further events. It's not efficient to rewrite every icon that I embed to img tag and not an appropriate approach especially in case of default MUI icons.

Abhishek Sharma
  • 2,485
  • 1
  • 21
  • 35
  • 1
    The question as its now, is not descriptive enough, based on the error it seems that you are trying to stringify a circular object, neither anything in your code or your description indicated why, and where you are doing that. You should start by showing the click handler attached on the icon – ehab Aug 28 '20 at 11:50
  • I am not stringifying, the GTM library has the code which does that. The GTM library tracks every click event and captures the element which is clicked and does something in the background. I have not associated any click event manually with the element. – Abhishek Sharma Aug 29 '20 at 12:40
  • Any success with this one? I am facing exactly same issue - divs with an SVG cause the GTM to fall. – Denis Romanovsky Nov 24 '20 at 16:14
  • Couldn’t find any solution yet. I just replaced the SVG with PNG as of now until any stable solution appears. At least it stops crashing the GTM library. – Abhishek Sharma Nov 24 '20 at 16:41

1 Answers1

0

We have noticed the exact same thing recently popped up in our codebase (following another dev adjusting import statements to svg files local to the project) so my searches brought me through this un-answered question. For us, the problem initially manifested by the chrome extension 'data layer checker' somewhat checking out after clicks on certain screen/icon elements... elements that included a rendered <svg> tag content.

See SVG click events not firing/bubbling when using <use> element

Short version: Try adding "pointer-events: none" css rule to the <svg> element, so the click (for gtm purposes) comes from a parent element instead. Seemed to work when manually inserting it via chrome inspector (defined as: the DLC extension didn't choke, and showed a valid gtm.click entry).

Robert Lybarger
  • 71
  • 1
  • 3