SVG with links

# 3 years ago
CameronKnowlton Member	I notice that Links are not implemented in the [high res] SVG download, even though they work [swimmingly] in the Animated version of the download. SVGs are fully capable of using links (surround the Shape with an A tag), e.g. <a href="theLink.html"> <g transform=" … </g> </a> The Animated output is nice, but a linked SVG is critical to us for SEO and other automated link discovery needs. There's no indication in the SVG group container <g> what that group represents, so I cannot mark up the SVG myself. How can we obtain a linked SVG? Edited 15 Jun, 2021 23:25

# 3 years ago

CameronKnowlton

I notice that Links are not implemented in the [high res] SVG download, even though they work [swimmingly] in the Animated version of the download.

SVGs are fully capable of using links (surround the Shape with an A tag), e.g.
<a href="theLink.html">
<g transform="
…
</g>
</a>

The Animated output is nice, but a linked SVG is critical to us for SEO and other automated link discovery needs.

There's no indication in the SVG group container <g> what that group represents, so I cannot mark up the SVG myself.

How can we obtain a linked SVG?

Edited 15 Jun, 2021 23:25

# 3 years ago
Alex Key Master	Hello, please send an email to the support with your word art name and I'll send you the SVG file with links.

# 3 years ago
CameronKnowlton Member	OK, so I have clicks working now in the HTML Animated download (using manual configuration of each word's link). However, I'm not able to detect in Google Tag Manager the word being clicked on. I'm pretty advanced in GTM, but I can't detect any variable in GTM's Preview/Debug mode that suggests the specific word clicked. I can't even extract the target URL during the click. I'm hoping to catch the word being clicked and sending that to Google Analytics as an Event. The SVG in question is live on my genealogy site's home page: http://www.theknowltons.com/ Edited 29 Jun, 2021 19:54

# 3 years ago

CameronKnowlton

Member

OK, so I have clicks working now in the HTML Animated download (using manual configuration of each word's link).

However, I'm not able to detect in Google Tag Manager the word being clicked on. I'm pretty advanced in GTM, but I can't detect any variable in GTM's Preview/Debug mode that suggests the specific word clicked. I can't even extract the target URL during the click.

I'm hoping to catch the word being clicked and sending that to Google Analytics as an Event.

The SVG in question is live on my genealogy site's home page:
http://www.theknowltons.com/

Edited 29 Jun, 2021 19:54

# 3 years ago
Alex Key Master	Hi Cameron, I am not an expert in GTM, so I cannot help you there unfortunately.

# 3 years ago
CameronKnowlton Member	In WordArt's animated HTML code, are you able to trigger a custom event that we can detect? Something, anything, that can be detected in Javascript, or HTML, or …?

# 3 years ago
Alex Key Master	Custom event on click? Please send your word art HTML to the support and I'll see what can be done. Edited 30 Jun, 2021 06:58

# 3 years ago
CameronKnowlton Member	When someone clicks on a word the system figures out which URL to send the page to. I believe it is due to entries like this in the WordArt data. { "parentId": "vodP", "textId": 255, "fill": "#791131", "shapeColor": "00bc43", "matrix": [ [0.003920013386880856, 0, 353.14379919678714], [0, 0.003920013386880856, 169.6797576419637] ], "url": "http://www.theknowltons.com/wc_idx/idx006.html#HARRISON" } When the click is done I would like to be able to hook up an event listener that will fire before the page moves on to the "url" in that data structure. Is there an event I can listen for that fires when a word is clicked?

# 3 years ago

CameronKnowlton

Member

When someone clicks on a word the system figures out which URL to send the page to. I believe it is due to entries like this in the WordArt data.
{
"parentId": "vodP",
"textId": 255,
"fill": "#791131",
"shapeColor": "00bc43",
"matrix": [
[0.003920013386880856, 0, 353.14379919678714],
[0, 0.003920013386880856, 169.6797576419637]
],
"url": "http://www.theknowltons.com/wc_idx/idx006.html#HARRISON"
}
When the click is done I would like to be able to hook up an event listener that will fire before the page moves on to the "url" in that data structure. Is there an event I can listen for that fires when a word is clicked?

# 3 years ago
Alex Key Master	Hello, Here is what you can do: 1) Patch the HTML file by replacing "javascript:" with something like "jvs:" to allow javascript callbacks 2) Use something like "url":"javascript(alert('ok' ) )" in your word art json data to make callbacks on clicks Hope it helps. Edited 06 Jul, 2021 09:41

# 3 years ago
CameronKnowlton Member	1) What do you mean "patch the HTMLfile"? All I get is an element from your site that I paste onto my page. It has a minified JS that I have no idea how it works. 2) when I put "javascript(alert('ok' ))" into the link column of the words table all it does is use it as if it was a relative link on the wordart site, ie https://wordaty/com/edit/javascript(alert('ok' )). It does not run the js.

# 3 years ago
CameronKnowlton Member	You forgot to mention the following line to make the js work: window["TAGUL_DO_NOT_PROTECT_URL"] = true;

Reply