AFL UTM Tracker Documentation

  2. Home
  4. Docs
  6. AFL UTM Tracker Documentation
  8. Other Form Integrations
  10. Zoho Bookings: Setup UTM parameter tracking

Zoho Bookings: Setup UTM parameter tracking

You can use our AFL UTM Tracker plugin to populate dynamic UTM parameters into your Zoho Bookings Forms embedded in your WordPress website.

Minimum Requirements

  • AFL UTM Tracker v2.23.1
  • WordPress v5.0.0
  • Zoho Bookings

Steps

Let’s summarize the steps to populate the UTM parameters into your Zoho Bookings.

  1. Enable the “Javascript Merge Tag” feature under the AFL UTM Tracker plugin settings.
  2. Create Hidden Fields on Zoho Bookings.
  3. Get your Zoho Bookings iframe Embed Code.
  4. Use our Appfromlab HTML Code.
  5. Paste our HTML Code in your WordPress page.
  6. Test your Zoho Bookings.
  7. View your Zoho Bookings appointments.

1. Enable the Javascript Merge Tag feature

You will utilize our Javascript Merge Tag feature to populate the UTM parameters into the Zoho Forms hidden fields.

  1. Login to your WordPress Admin dashboard.
  2. Go to AFL UTM Tracker > Settings page.
  3. Under Attribution section, enable the Javascript Merge Tag feature.
  4. Save settings.
  5. Clear all page cache from your caching plugin.

2. Create hidden fields on Zoho Bookings

  1. Login to your Zoho Bookings account.
  2. Go to Services > Edit a Service.
  3. Go to Booking Form.
  4. Add Field
    • Field Label: utm_source
    • Field Type: SingleLine
    • Mandatory: No
    • Save.
    • Hide Field.
  5. Repeat the above step for other UTM parameters.
    • utm_medium
    • utm_campaign
    • utm_term
    • utm_content
Zoho Bookings Main Page
Zoho Bookings Main Page
Zoho Bookings Form Fields
Zoho Bookings Form Fields

3. Get your Zoho Bookings iframe Embed Code

  1. On the top right page, click on the “Share” button.
  2. Click on the “Embed as Widget” tab.
  3. Copy code (we will be using this in the next section).

Take note of your iframe src URL highlighted in bold below (we will be using this in the next section).

<iframe width='100%' height='750px' src='https://xxxxxx.zohobookings.com/portal-embed#/xxxxxx' frameborder='0' allowfullscreen=''></iframe>
Zoho Bookings iframe Embed Code
Zoho Bookings iframe Embed Code

5. Use our Appfromlab HTML Code

We will be using our HTML wrapper to surround the Zoho Bookings iframe embed code.

  1. Replace Line 3 with your Zoho Bookings iframe embed code (from previous section).
  2. On Line 2, paste your iframe src URL (from previous section) into the data-afl_utm_src=”” attribute.
  3. Copy the HTML code (this will be used in the next section).

HTML Code

Configuring the data attribute

See more data attribute options (e.g optout value) for iframe-based forms.

6. Paste our HTML Code into your WordPress page

  1. Login to your WordPress admin dashboard.
  2. Edit your Contact Form page.
  3. Add a “Custom HTML” block.
  4. Paste the Appfromlab HTML Code from the previous step into the block.
  5. Save page and clear page cache.

7. Test your Zoho Bookings

  1. Generate your UTM tracking URL.
  2. Visit your UTM URL in private-browsing mode to simulate a new visitor.
  3. Submit the form.