APIs & Integrations

WTingen
Membro

Adding JavaScript to Landing Page Buttons

Based on previous aid provided to our team we created buttons using a Rich Text module to allow adding scripted links. So far we have attempted various formats of link without success.

 

We are now trying a JavaScript based solution. However, I can't figure out how to add the scripts that have been provided to the buttons. 

 

Here is the landing page with the buttons — https://doyoukare-1.hubspotpagebuilder.com/kare-be-your-own-boss

 

Thank you for the assistance.

0 Avaliação positiva
5 Respostas 5
Anton
Especialista reconhecido(a) | Parceiro Diamante
Especialista reconhecido(a) | Parceiro Diamante

Adding JavaScript to Landing Page Buttons

Hi @WTingen

First of all: I'd recommend to create a custom module for the links/buttons - they're a bit better to handle for non-devs and easier to maintain. 

 

Also - could you please specify what exactly you'd like to achieve? If you want something like "how many times was the button clicked" thing and you don't have CTAs(available in Marketing Pro, CMS Pro and up) you could create trackable URLs (Settings > Tracking & Analytics > Tracking URLs). They even got UTM params if you need. 

 

A custom module could look like this:

Anton_0-1660577640321.png

 

{% set href = module.link_field.url.href %}
{% if module.link_field.url.type is equalto "EMAIL_ADDRESS" %}
	{% set href = "mailto:" + href %}
{% endif %}
<a href="{{ href }}"{% if module.link_field.open_in_new_tab %}target="_blank"{% endif %}{% if module.link_field.rel %}rel="{{ module.link_field.rel }}"{% endif %} class="abs" onclick="saq('conv','8MfKu4oLfegOeFdv3rzWX4'); return true;">
	{% if module.link_tag_style == "text" %}
		{{ module.text_label }}
	{% elif module.link_tag_style == "image" %}
		{% if module.image_label.src %}
	{% set sizeAttrs = 'width="{{ module.image_label.width }}" height="{{ module.image_label.height }}"' %}
	{% if module.image_label.size_type == 'auto' %}
		{% set sizeAttrs = 'width="{{ module.image_label.width }}" height="{{ module.image_label.height }}" style="max-width: 100%; height: auto;"' %}
	{% elif module.image_label.size_type == 'auto_custom_max' %}
		{% set sizeAttrs = 'width="{{ module.image_label.max_width }}" height="{{ module.image_label.max_height }}" style="max-width: 100%; height: auto;"' %}
	{% endif %}
	 {% set loadingAttr = module.image_label.loading != 'disabled' ? 'loading="{{ module.image_label.loading }}"' : '' %}
	<img src="{{ module.image_label.src }}" alt="{{ module.image_label.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
		{% endif %}
</a>

 

 

hope that helps

 

 

best, 

Anton

Anton Bujanowski Signature
WTingen
Membro

Adding JavaScript to Landing Page Buttons

Thank you Anton. The intent is to allow our 3rd party vendor to log the link clicks. 

 

I'm looking at the Trackable & Analytics feature and I don't see Trackable URLs available for me.

Screen Shot 2022-08-15 at 11.46.04 AM.png

Is that a feature available with a different level of account? I only see the Tracking Code option and it does not have a Create Tracking URL in the upper right as described by the link you provided.

 

Thank you again for your help.

0 Avaliação positiva
WTingen
Membro

Adding JavaScript to Landing Page Buttons

I'm not getting a response from the </> button when I try it. Here is a screenshot of the button I'm attempting to add two of the code scripts.

Screen Shot 2022-08-15 at 11.21.22 AM.png

The options that appear to be available are:

Screen Shot 2022-08-15 at 11.22.10 AM.png

I previously used the Advanced tab to access the source code:

Screen Shot 2022-08-15 at 11.22.14 AM.png

 

Screen Shot 2022-08-15 at 11.21.43 AM.png

 

Thank you for your help @Jaycee_Lewis!

 

0 Avaliação positiva
Jaycee_Lewis
Gerente da Comunidade
Gerente da Comunidade

Adding JavaScript to Landing Page Buttons

Hi, @WTingen 👋 Is it possible for you to share the code you are working with? You can use the code block function to help with formatting.

code_block_me.png

Hey, @Anton @Oezcan, do you have any suggestions for @WTingen on how to approach this challenge?

 

Thank you for taking a look! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

WTingen
Membro

Adding JavaScript to Landing Page Buttons

Hey Jaycee. Happy to share the scripts that I was provided. Here is the link:

https://docs.google.com/spreadsheets/d/1lESkx_kR80eUGxPrAN3o3DgKJFviDDHjfBRp_qSFB9w/edit#gid=1635531...

 

I'm going to try what you suggested rq. Thank you.

 

0 Avaliação positiva