Lead Generation
      Back to home
      1. Knowledge Base
      2. Lead Generation

      How to integrate Typeform with AnyTrack

      Learn how to integrate Typeform with AnyTrack so you can leverage your form data across other tools such as Calendly

      In this article, you will learn the basic Typeform and AnyTrack integration flow so you can track any of your quizzes and fire the conversions back to your analytics and pixels. Once you'll master the basic integration, you'll be able to implement advanced funnels that start on Typeform and move to other platforms such as Calendly, affiliate networks, or Shopify.

      tl;dr: Watch the tutorial

       

      Typeform and AnyTrack integration overview

      The goal of the integration is to be able to track the form submission lifecycle (form loading to form submission), and to pass tracking data into the form so you can track the customers in other tools and tie subsequent conversions back to AnyTrack (and your ad pixels).

      In a standard scenario a visitor will go through the following steps:

      1. Visitors will load your Typeform by clicking on the form URL, or if you've embedded the form JS on your landing page.
      2. At run time, AnyTrack passes a click_id hidden parameter to the form and triggers an "outbound click" event.
      3. When the customer completes the form, AnyTrack receives the conversion via webhook and triggers a conversion.
      4. Depending on the final step of your form, you can "recall" the click_id value to pass it to the destination URL or submit the form data to your CRM or marketing platform.

      Reminder about webhooks:

      Webhooks are URLs that enable application servers to send event notifications to other servers. For example, if we want Typeform to notify us every time a user submits a form, we can place the AnyTrack webhook URL in Typeform.

      It's automatic, extremely reliable, and does not rely on cookies or other tracking methods to be activated.

      Prerequisites:

      The AnyTrack Tracking Tag must be set in the head section of the webpage where the Typeform loads. 

      Setup instructions

      These instructions are similar whether you are creating or updating a form.

      1. Edit the form and open the tab: Logic > Advanced settings
      2. Add a hidden field named: at_click_id

        Screen Shot 2021-11-25 at 12.26.35
      3. Save and don't forget to publish the form

      Typeform Integration Demo

      1. Click on the link to initiate the form
      2. Fill the form and submit it
      3. Check your emails to see the data that was sent to the webhook

      Important notes:

      When you hover on the typeform link, you'll notice the anytrack click_id has been appended to the URL.

      Once submit the form you'll be redirected to Calendly 👉 Pay attention to the Calendly URL.😜

      👉👉 Typeform Link  👈👈

      Verify your integration

      Open your form results to see if you the clickid has been recorded. If it's not recorded, run through the setup guide again.

      אטפק

      • Is the tracking tag on the site where the form loads?
      • Did you add the hidden field to your Typeform?

      Advanced funnel tracking

      If the typeform is only the first step of a funnel that continues through other platforms - Calendly, Affiliate Offer, eCommerce site or else you will be able to track conversions as long as you pass the anytrack clickid to the next platforms.

      • Typeform + Calendly
      • Typeform + affiliate link
      • Typeform + redirect
      • Typeform + CRM 

      Typeform + Calendly

      You use Typeform to qualify the leads, and funnel quality leads to a Calendly booking page.

      Your conversion goals:

      • Form Submission for all form submissions
      • Lead for all qualified Leads (from Typeform)
      • Meeting Booked (from Calendly)

      Note: If you also push your leads to a CRM to track offline sales, you should also push the click_id parameter to the CRM.

      Consult with your CRM provider to see how create a custom field.

      How to implement it?

      Assuming you've already added the the clickid parameter into your Typeform.

      1. Open the form settings ⚙️

      2. In the Redirect option, add the following query parameter to the Calendly URL:

        You should then see something like this:  
        https://calendly.com/yourcalendar?UTM_term=

         

        Screen Shot 2022-04-06 at 17.55.04

      3. Then click on the plus in the right corner and pick the hidden field

        Screen Shot 2022-04-06 at 17.55.24

      4. Save and publish the form

      Note: You will need to integrate Calendly in AnyTrack in order to track the booked meetings.

      Typeform Ending Redirect URL

      Typeform + Affiliate link in custom integration

      In case your affiliate platform has integration in our catalog, this step is not required.

      The case      : driving traffic to a Typeform and later to an offer link.

      How to implement it?

      1. Open the form settings 
      2. In the Redirect option, add the subid parameter of the affiliate platform to the URL (This information should be on its documentation). Ex: ?sid=
      3. Then click on the plus in the right corner and select the at_click_id field
      4. Save  and publish the form (see below for illustration)


      Typeform + Redirect

      The case: driving traffic to a Typeform and later to a different website.

      How to implement it?

      1. Open the form settings ⚙️
      2. In the Redirect option, add the following query parameter to the URL:?atclid=
      3. Then click on the plus in the right corner and pick the hidden field.
      4. Now you can save and publish your form.

      Firing a FormSubmit event to AnyTrack

      1. Go to the Connect section
      2. Look for Zapier and connect it
      3. Select your form and run a test to retrieve some data
      4. Now add the webhook link from AnyTrack and map the following fields:
       
      Publishing your form on your website or landing page builder

      Typeform offers several publishing options, and we'll show you the two main ones.

      Publish the link to the Typeform

      That's the easiest way to track your form, as Anytrack will AutoTag the Typeform link with the tracking parameter.

      Note, however, that when you copy the form URL, the click_id parameter is included in the link.


      👉👉 You must remove it before publishing it on your site. 👈👈

       

      🔴 Default link provided by Typeform

      https://anytrack.typeform.com/to/cuDhwkVi#at_click_id=xxxxx

       

      🟢 Updated Typeform link

      https://anytrack.typeform.com/to/cuDhwkVi

       

      Embed the form on your website

      In this case, too, AnyTrack will identify the TypeForm and will automatically insert the click_id into the form.

       

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Demo Form</title> <style>*{margin:0;padding:0;} html,body,#wrapper{width:100%;height:100%;} iframe{border-radius:0 !important;}</style> </head> <body> <div id="wrapper" data-tf-widget="cuDhwkVi" data-tf-inline-on-mobile data-tf-hidden="at_click_id=xxxxx"></div> <script src="//embed.typeform.com/next/embed.js"></script> </body> </html>

       

      👉 You can try this demo to see how it in action.

       

      How to generate a webhook URL in AnyTrack:

      1. Create a custom integration
        Screen_Shot_2022-03-03_at_15.22.32.png

       

      2. Fill in the name of the integration ( The URL is not obligatory) :


      Screen_Shot_2022-03-03_at_15.25.56.png

      Fill all parameters with dummy values and save.

      We will remove all values in the next step.

      Untitled_2.png

      3. After clicking save, copy the webhook URL and paste it in your zap


      Untitled_3.png