Add trigger to fire with data-id

[cheznico]

Hi,

Im trying to setup a trigger so it can fire when somone signs up to our newsletter.

The button is want to fire it on only has a “data-id” attribute, that is unique from the others buttons. When i inpect the button it looks like this:

<div data-id="Element174" data-element="button-1" data-sn-type="button" class="element" style="width: 500px;" data-click="submitSleeknoteBox" data-track-id="Element174"><div aria-label="false" class=" inline-editor button" raw-html="" style="background-color: rgb(0, 159, 112); background-repeat: no-repeat; background-position: 0px 0px; background-size: 100%; border-style: solid; border-color: rgb(255, 255, 255); border-width: 0px; font-size: 12px; text-align: center; color: rgb(255, 255, 255); font-weight: normal; border-radius: 0px; padding: 10px; font-family: Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;"><p><strong style="line-height: 22px; font-size: 16px; font-family: poppins;">Sign up for our newsletter</strong></p></div></div>

Which attribute can i use so it will fire when somone is pressing the button?

[kuba]

[cheznico]

Thanks for you quick reply. Unfortunately, it still doesn’t fire

Do you have any thought about why it doesn’t fire?

[kuba]

Please show your trigger configuration (the screen that I pasted).

[cheznico]

I’ve tried both with [data-id=‘Element174’] and [data-id=“Element174”]

[kuba]

Not sure how the form is handled, but in many cases jQuery disables events bubbling. It might be the problem here since debugger shows no click even after signup.

On the other hand, I see that a datalayer event is emitted. You can change the trigger to the following one:

You can also use all other fields as additional constraints in case there are more events with this name.

{
  "SleeknoteId": "XXX",
  "SignupPage": "https://virogates.com/",
  "event": "SleeknoteSubscriber",
  "fieldData": {
    "signup_website": "undefined",
    "email": "email@example.com",
    "checkbox": "checkbox newsletter signup",
    "first-name": "asdfasdf",
    "job-title": "asdf",
    "last-name": "asdfsadf",
    "Organisation": "asdfadsf",
    "Country": "asdfasdffs",
    "guid": "XXX",
    "SleeknoteId": "XXX",
    "CustomerId": "XXX",
    "SignupPage": "https://virogates.com/",
    "PageTitle": "suPARcharging triage - suPARnostic® by ViroGates",
    "UserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36",
    "hutk": "XXX"
  },
  "CustomerId": "XXX",
  "gtm.uniqueEventId": 35
}

One more note - the console shows errors indicating that the container code was installed twice:

ff56a63b-2d71-48f9-a35c-ff44a58d4e22.js?stg_debug:8 Uncaught TypeError: Cannot redefine property: $webStorage

[cheznico]

Thank you. The trigger fire now due to Data layer events settings = SleeknoteSubscriber.

There are more events that fires with that name, so it doesn’t only fire when someone subscribes to the newsletter but also on other forms.

Can you give me an example of how I can

“You can also use all other fields as additional constraints in case there are more events with this name.”?

Thank you very much, your help is very appreciated.

[kuba]

Which field from the datalayer I presented indicates that it’s newsletter signup? Maybe there’s some unique ID for this form that would help in this case. E.g. SleeknoteId? You can compare both datalayers by checking different forms. You can preview it here in the datalayer tab:

[cheznico]

Yes, the forms have a different SleeknoteID. The SleeknoteID for the newsletter signup is 4b9c74da-66dc-4c7a-8759-cdebffa5f559

Could it be set up like this? Or which condition should i use

[kuba]

Example datalayer variable if you go with the SignupPage field (assuming there’s one such form on the homepage):

[kuba]

With nested object there’s a bit more work to be done.

Get all the fields:

Select the ID:

Use the ID in trigger:

Of course, it’s a simplistic example. You can also add more code checking if the given datalayer object is defined to avoid js errors when there’s no datalayer object defined.

[cheznico]

It worked with the return SleeknoteId metode! Thanks!

I have published them, but I can’t see them in Analytics → Reports → Custom event. Does it take awhile before they will appear?

[kuba]

You can check it live in Analytics → Settings → Tracker debugger. Other reports need around 30 mins to update.

[cheznico]

Unfortunately, the custom events don’t show in tracker debugger. Is it possible that they work in Debug mode, but not when they are published?

[kuba]

I see it’s working fine event is sent properly (but without the name since your variable is not defined I guess).

BTW. there are some errors in console due to not set datalayer value that I mentioned before.

[cheznico]

Should this do the trick?

[rmeekers]

let sleeknote = should be removed. start with function()…
Interesting that the editor does not validate this

[cheznico]

Thanks. Do you know what is meant with that my variable is not defined?

[rmeekers]

that happens if the function doesn’t return a result
What’s the output of {{ Sleeknote fields }}?

[cheznico]

To set datalayer value i should add This to The site?

script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'SleeknoteId': 'Signup',
    
    });

And how can i define the variable?

Thanks in advance, your help is appreciated!