Question

Typeform UTM's in GA xxxxx / xxxxx


Badge

Hi,

So I am tracking Typeform forms through Google Tag Manager.

In Google Tag Manager everything works and I can see test typeform submits in GA real-time. But, I can see those submissions under source/medium xxxxx / xxxxx, in GA so I need some help how to get the proper source/medium in GA.

Also, over the weekend we got 2 submissions that GA didn’t catch at all, not even as direct/none while through testing it today it seems that everything works fine, so not sure why GA didn’t catch those two submissions.


17 replies

Userlevel 7
Badge +5

Hi @iobrovac Thanks for stopping by the community! 

If you have the form embedded on your website, there’s a slight extra step you’ll need to do in order to track the source and pass that through the hidden fields. 

To do this, you’ll adjust the part of your code to add in the pieces in bold with your hidden fields: 

 

<a class="typeform-share button" href="https://yourform.typeform.com/to/kdfsdf?utm_source=xxxxx&utm_medium=xxxxx&typeform-medium=embed-snippet#gclid=xxxxx" data-transferable-url-parameters="gclid, utm_source, utm_medium" data-mode="popup"

Then, the data in Google Analytics should update. 

As for the submissions not passing through, this can happen if the respondent has turned off cookies. If this is the case, it won’t count the data in GA. Though, if you notice this with all of your submissions, would you mind sending the URL where your form is located? I can then take a further look into this for you!

Badge

Hi @Liz, yes, we have an embedded form on the website that is getting traffic from Linkedin & Facebook.

Due to that, how can we adjust the code to get either the Linkedin or Facebook source/medium? Since the code you sent looks like it will pass only one source/medium, or am I wrong?
 

At the moment, no submissions are passing through to GA (even as direct).

We got two different forms on two different landing pages:

 

LP1
https://www.wholesale24.market/demand-form
https://www.wholesale24.market/supply-form

LP2

https://www.wholesale24.bid/demand-form

https://www.wholesale24.bid/supply-form

 

Thanks for the help!

Userlevel 7
Badge +5

Hi @iobrovac Thank you! I looked at the URLs, and I’m also noticing that the data isn’t passing to Google Analytics. Would you mind confirming that you have the forms connected to Google Analytics in the integration setting of each form? 

As for passing the source data from Linkedin or other social sites, you’d first want to see if they have any particular UTM variables they pass through and add those to your form. I found this article here that provides more information on passing data from Linkedin. 

Badge

Hi @Liz, we are using Google Tag Manager and the GA code is firing for Typeform in GTM preview. 

We are using standard UTM parameters (utm_campaign, utm_medium, utm_source), I was just wondering how should my embedded code look like if we use for example:
 

source/medium= facebook/cpc

source/medium= linkedin/cpc

source/medium= google/cpc

Just trying to figure out how to structure the code you have sent me, not certain what we need to do with the red information:

<a class="typeform-share button" href="https://yourform.typeform.com/to/kdfsdf?utm_source=xxxxx&utm_medium=xxxxx&typeform-medium=embed-snippet#gclid=xxxxxdata-transferable-url-parameters="gclid, utm_source, utm_medium" data-mode="popup"

Userlevel 7
Badge +5

Hi @iobrovac Ah, got it! Those should automatically populate automatically for you, but if you’re noticing they don’t work, please let me know, and I’ll be happy to test it for you!

Userlevel 7
Badge +6

@Liz - just a query in case i am running short of coffee.. should the text in red above have the xxxxx’s replaced with the appropriate value from the statement above ie utm_source=facebook&utm_medium=cpc

if the details are not ‘present’ in the link being passed into the typeform, then my current understanding is that they won’t autopopulate out of thin air.. (ie on the facebook page, you would have the link set with the utm_source=facebook, etc,; on the linkedin page it would say utm_source=linkedin…. ) 

please correct voice #2 in my head, who is adamant about this lol.. me, i am not so sure.. lol

 

des

Badge

@john.desborough yep, that is my question as well

Badge

Hi @Liz, it seems we are using a different type of embed then the one you mentioned, we use this source code:

<iframe id="typeform-full" width="100%" height="100%" frameborder="0" allow="camera; microphone; autoplay; encrypted-media;" src="https://form.typeform.com/to/ul2yt8J7?typeform-medium=embed-snippet"></iframe> <script type="text/javascript" src="https://embed.typeform.com/embed.js"></script>


So, just wanted to check how should our code look like with UTM’s

Badge

Hi @Liz, so we just embedded a code to this testing form:

https://w24-bid-buy.webflow.io/demand-form

But, we are still getting xxxxx/xxxxx in testing, here is a pic:
 

 

Userlevel 7
Badge +5

Hi @iobrovac Thank you for sharing the links! First, you’ll want to use the standard embed. The full page embed shouldn’t be used unless it’s the only code on the page. I’d suggest making this change first. 

As for the hidden fields, you will want to remove the x’s and leave the empty. Google should be able to identify what the referring page is, but if you’d like to take this a step further, you can enter the sources manually and share those specific links on the social platforms. 

For example, if you’re sharing the form on LinkedIn, you’ll want to edit the URL to look something like this: 

 

https://w24-bid-buy.webflow.io/demand-form?utm_source=linkedin

 

Let me know if you have any troubles adjusting this!

Badge

Hi @Liz, so I just asked my team why are we using the full embed and this is why was it used:

“We decided to use the full embed as other options gives us a starting screen on mobile devices, which is not a best UX for users - with using full embed, users can start the form as soon as the form loads without any starting screen.”

Do you perhaps know how to remove the starting screen when using a standard embed on mobile devices?

Other than that, we are using something like this: https://w24-bid-buy.webflow.io/demand-form?utm_source=linkedin, but it’s not working for us, the UTM information is not transferring.

thanks,

Userlevel 7
Badge +5

Hi @iobrovac I’m noticing the code also doesn’t have the ‘data-transferable-parameters’, which you’ll need to pass in the hidden fields. 

To skip the Start button on embedded forms when viewing on mobile, add ?typeform-welcome=0 after the URL in the embed code. Your typeform must have a Welcome Screen for this to work.

Let me know if any other questions popup in the meantime! 

Badge

Hi @Liz thanks for this, we’ll try it out.
 

We noticed that Typeform sends a different _ga cookie, so we have two _ga cookies on the website that has an embedded Typeform.

In GTM we use a cookieFlags field with this value max-age=7200;samesite=none;secure

Is there anything else we should do to set the cookies straight?

tnx again!
 

Badge

Hi @Liz again,

so we’ve implemented everything here: https://w24-bid-buy.webflow.io/supply-form

Now we are getting UTM’s when users come directly to the /supply-form, but as I presumed, the “data-transferable-url-parameters” variable doesn’t work if users come from the homepage as there are no UTM’s in that user journey (which is what we are doing).

I think an option to fix it would be to store UTM’s in a cookie and to transfer the value to Typeform. I’ve found one solution where cookie value is inputted into a hidden field, but don’t know if this is possible to do in Typeform.

Do you have any solution to get the cookie value as a hidden field?

Thanks in advance

 

Userlevel 7
Badge +5

Hi @iobrovac Off the top of my head, I sadly don’t, but @picsoung or @mathio may have a better idea of this! :smiley:

Userlevel 4
Badge +3

Do you have any solution to get the cookie value as a hidden field?

You need to do this on your side. You can pass value to hidden fields from any source you want if you use embed SDK.

<div id="form" style="width:100%;height:400px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
// extract cookie value
const cookieValue = document.cookie.match(/my_cookie=([^;]+)/)

// create widget
window.tf.createWidget("jAJ5qj", {

// widget container element
container: document.querySelector('#form'),

// pass extracted cookie value as hidden field (named "foo")
hidden: {
foo: cookieValue ? cookieValue[1] : ''
}
})
</script>

I created a working example on Glitch: https://glitch.com/edit/#!/somber-curious-fedora?path=index.html%3A97%3A10

Userlevel 7
Badge +5

This is so handy, @mathio ! Thank you!!

Reply