Any way to set a ID on a button?

I usually have an ID for my buttons, and this way I can track the button clicks in Google Analytics using events.

But, I can’t find a way to add an ID to the buttons in Sparkle.

Is this possible?

@WebRoyal, If you mean a Div id then yes. I use it to introduce bespoke CSS for my projects.

If you go to Settings/Miscellaneous/Code Integration, tick it and then hit done. Now go to your canvas and click on the button you want to track and go to top right Arrange/Code Integration… and that should do it.

Maybe you can enlighten us on this “events” technique with Google Analytics - I wasn’t aware of it but it sounds it could be very useful.
Thanks.

2 Likes

Yes Sparkle can do that. When you enable “Allow HTML element id customization” in the Miscellaneous site settings, you get a “Code integration” section of the arrange inspector of all elements, and in the case of buttons where the id goes depends on the button type.

For buttons with a custom look it’s going to be in the a tag:

<a href="https://sparkleapp.com" id="mybutton" class="f btn v3 s3">Button</a>

For buttons with a system look it’s on the input tag:

<input id="mybutton" type="submit" value="Button" name="button" class="js s3 submit">

3 Likes

I’ll make a video about how I use this to track events in Google, @FlaminFig. Thanks!

4 Likes

Thanks @duncan - love it. This program gets better every time I ask a question. :wink:

Just to understand, you must put the code in the id # ?
Button

I tried putting this code on all of my buttons, strangely the layout went crazy in every direction. Where did i go wrong please?

Do we need Tag manager to track where visitors clicked ?

thnks
Ben

There’s currently no tool to know where visitors clicked. Tag manager might be able to do it but frankly it’s too complex for me, I don’t understand it.

What are you trying to do?

Can you send me the project file where the layout went crazy? We would definitely like to fix it, but you give no details so no idea. feedback@sparkleapp.com

Thanks for the feedback.
But what is the purpose of Id#, is it to add html code to the pages that you can’t do with sparkle ?

Indirectly yes.

Now please:

  • What are you trying to do?
  • Can you send me the project file where the layout went crazy?

@benross You can use Google Tag Manager to track button events in Google Analytics, by setting the button ID and using element event firing to send these events to Google Analytics.

@webroyal Thanks, do you put the code Duncan gave you in the id box ? And how do you put the google tag code in the header and body ? Manually ?

In the Settings panel on the top right of your Sparkle program, under “Analytics”. Change it from Google Analytics to Google Tag Manager and enter the tag manager code here.

What may be happening is that you don’t want to put the entire code Duncan gave you, he was just giving an example of how an ID would look once it is exported to HTML. In the ID field for your button, ONLY put a single word that you want to be your button ID.

This may be why you were getting layout issues, because you were injecting extra HTML code by accident.

ok, i understand better now ! thanks.
And for the google tag manager code you have to put in the header and top of the body, did you put it manually in each page ?

Put it in Sparkle’s settings panel which is in the top-right of your UI.

On my side if i don’t put the code in the html, i get no reponse from tag manager so i had to put it manually. Even if i set it on Tag manager… strange

Try using the Google Tag Assistant chrome extension; what’s the result?

From the beggining i was wrong, i thought i needed to add code to my index.html. But it seems to work without it. thanks

How do you see in Analytics where people have clicked ? I made triggers and tags to some buttons and it fires ok. But i would like to see the results in Analytics, where should i look please?
thanks,
Ben

Under Analytics this is in Behavior > Events.