Button ID

Marketing & Content Blog, Website & Page Publishing
1

I’m trying to find the button ID and the abilty to add a button ID to a button that is on a landing page.

I am connecting facebook ads with the custom event of submitting form for my campaign and it is triggered by custom script that is looking for the button ID

i just don’t know where to find or edit the button ID that is both on the form and on the landing page of my site.

2

Hello @ASarvis,

Thank you for your inquiry.

Could you please share more context and screenshots of the button you mentioned?

The more details you provide us, the more options we will have to find a solution. Please share as much information as possible so that we can better understand the issue and assist you effectively.

Thank you for your cooperation.

Diana

3

@DianaGomez Yes,

Here is the button in the webpage with the options: I didn’t build the page - and i don’t really know how the landing page editor works.

screenshot 1.1.JPG
screenshot 1.1.JPG3166×1806 754 KB

when I try to edit the button in the forms section this is the only option i get:

screenshot 1.2.JPG
screenshot 1.2.JPG3168×1511 203 KB

The reason i need to add the button ID to this is so that I can get the code in the backend to listen for the submission of this button to then trigger the submit event in facebook ads.
This is the code I would be adding to the landing page:

<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function() {
 fbq('track', 'CompleteRegistration');
}, false);
</script>
4

Hi @ASarvis,

Thank you for the details and screenshots.

I’d like to involve some of our experts in the conversation to review whether they have any suggestions for you or if they have encountered a similar case in their experience and how they resolved it.

Hi @Mike_Eastwood, @HubDoPete, @DanielJeal, @Ben_M. Do any of you happen to have any suggestions for @ASarvis ?

Thank you all for your contributions.

Best regards,

Diana

5

Do you have a link to the page in question even if it is in testing? Often the ID may be set and you might not have the ability to edit it. If you inspect the code, you can see if an ID is being set or if there is a unique id/name already applied. Even if you can’t use the ID so long as you have unique way to identify the element (ie: name for instance) you might be able to make an edit to your JS to make this work.

6

@Ben_M yes when i inspect it this is the code block. There is no ID

<input type="submit" class="hs-button primary large" value="Yes! I Want A Beautiful Lawn ➤">

Here is the link to the page: #1 Charlotte Aeration & Seeding | Satisfaction guaranteed!

7

A couple of ideas for you. First is if you want the ID, you might have to go into the design manager and update the module to allow for the ID to be editable. Another option, would be to not use the getElementById, but look to the querySelectorAll to find the button with the classes “hs-button primary large” that are on the button today.

Or the other option coming to mind, personally speaking I have implemented tracking in the past mostly with a tag manager like GTM, but you could setup an event listener to then push your facebook event when a successful submission occurs. At present, your facebook tracking would fire even if the form submission fails because it is looking for click as opposed to a successful submission. It would be something like this: https://medium.com/@dillonjones/the-easiest-way-to-setup-hubspot-form-tracking-in-google-analytics-a8ad9ab1fc4d .