Placement settings for custom content

Data collection and tags
1

Hi All - I’m trying to create a custom content tag, and I am able to get it to fire, but I can’t manage to place my custom content.

This is an attempt to target element by classname. Doesn’t work.

image
image789×184 7.11 KB

I’m not sure if I’m supposed to use {{double brackets}} or not. What is the expected syntax here?

Thanks!

2

Hi. You have to use ID instead of a class. This article should be also helpful.

3

Thanks!
I don’t have IDs on my elements. Is there a workaround?

4

Hi @michaelf,

One of the tricks to get around this limitation if you don’t have an ID is to earlier (e.g. on DOM ready event) run a separate tag to add ID to element that doesn’t have it. For example:

<script>
    document.querySelector(".myelem").setAttribute("id","some_id_of_your_choice");
</script>

I hope it will be helpful for you. Don’t hesitate to ask further questions if you have any. Cheers!

5

Thank you, I appreciate the clever idea :grinning:

Can this somehow be done solely in Piwik (Tag Manager?) or does it have to be added to application code?

Also, any plans to support the type of selectors we see elsewhere in Tag Manager? Creating custom events, for example, can be done without requiring ID’s on elements.

6

Hang on @Michael don’t take the time yet, I re-read your message and seems like you are saying that there is a way to do this with a tag. I will try and either succeed or fail and let u know!

7

OK, I see how it might be possible but was not able to get it to work.

I did run your javascript in the browser dev tools console and it worked like magic - ID was injected into target element.

Below are my trigger and tag. The tag is not showing as firing in debugger.

Can you help troubleshoot?

image
image1030×797 41.8 KB

image
image1415×1674 173 KB

8

Hey @michaelf, thanks for the feedback!
I see that you have “Fire tag once per session” selected in the trigger. I think this is why it might not run for you when you’re testing - it did once, and then it won’t for the time of the session. Make sure to allow “Fire tag multiple times” and check then - it should work. If not - please post a link to the page you’re testing on.

Cheers!

9

Thanks for the idea. I changed the trigger to file multiple times. Still does not work. I saw this error however:

image

Maybe that means the custom JS in the tag couldn’t find the target element because it didn’t load into the page yet. Maybe that’s the issue?

(I can’t share a link, app is behind firewall, VPN etc)

10

Yes, that would be just the reason. Element that you want to add the ID to, is not available at the time of running the tag.

There are multiple ways to go about this:

  • easy way - delay running the tags to Page Load state, but that can cause undesired flickering of the personalised element
  • less-easy way - send a dataLayer event from your website when the element is rendered, and base your trigger on that dataLayer event
  • hard way - employ mutationObserver to observe your site as it loads to find that given element has been already loaded, and then execute tag for adding the ID

I hope those suggestions will be useful for you. Don’t hesitate to ask further if you have any questions!