Answered

Is there a way to hard code custom HTML into typeform pages?

  • 2 March 2021
  • 6 replies
  • 2836 views

I’m looking to edit our Google Analytics Typeform events to allow for cross-domain tracking, but I can’t find a way to do this in the Typeform platform. I have our Google Analytics account connected with my Typeform page, but I don’t believe you can edit any of the events that are synced there. 

 

I can’t find anything in the help center or community about this - can someone help? If this isn’t possible, I’ll have to remove the Google Analytics connection and recreate those events in Google Tag Manager.

icon

Best answer by Liz 3 March 2021, 20:26

View original

6 replies

Userlevel 7
Badge +5

Hi @dbroberg - thanks for asking! We don’t offer an option to add custom code into the forms since we wouldn’t be able to guarantee how the form would look. 

The upside is that we do have an option using hidden fields to pass UTM values into your form and then into Google Analytics with the steps below:

 

1. Make sure you have connected your typeform to Google Analytics. Check out our help center article for more info.

2. Go to Typeform Builder (Create Panel) and add two hidden fields to your form.

3. Name them utm_source and utm_medium. It should look something like this:

 

?name=inline1412595078.png

 

Note! How the URL on the right side now displays differently to includes the data.

 

4. Publish the form so the changes are applied.

3. Now go to the share panel and choose your preferred way of embedding the form.

6. Click on get the code and when the pop-up window appears copy the code.

 

?name=inline594261492.png

 

7. Paste it in your code editor. Don't save check next step first.

IMPORTANT

8. Make sure your website URL has the parameters with the same name, that is, utm_source and utm_medium. It should look like this:

 

?name=inline-312076986.png

9. Go to the embedded code snippet and add the following part to the code you pasted in your website. :

 

data-transferable-url-parameters="utm_source, utm_medium"

10. Try not to break the code. Add it after data-mode="your embed mode" or after the Typeform URL just as in the screenshot. It should look like this:

 

?name=inline-1791143094.png

Hopefully this helps! Let me know if you have any troubles getting this setup. :) 

Hi is it possible to add html to a question?

 

For example I'd like to include a BMI calculator and Waist-to-Hip Ratio Calculator as you can see on this page https://www.healthbyscience.co.uk/free-resources/lose-weight/

Userlevel 7
Badge +5

Hi @stuartmaytham I’ve added your post here where we have the answer. 😀

Hello,

is there any difference between those parameters:

1)

data-tf-transitive-search-params="utm_source, utm_medium"

found here: https://www.typeform.com/help/a/dynamically-pass-utm-values-from-a-url-to-an-embedded-typeform-for-advanced-users-4406211186580/

2)

data-transferable-url-parameters="utm_source, utm_medium"

found in this thread here.

Thanks!

 

Userlevel 7
Badge +5

@mathio do you happen to know what the current version of the above is? 

Userlevel 7
Badge +5

Hi, yes there is a difference:

  1. data-tf-transitive-search-params is attribute valid for embed lib version >= 1
  2. this was the name of a similar attribute for old lib version < 1

You should use the first one with embed code you find in the share page of your typeform (or with current embed lib).

Reply