Skip to main content Link Menu Expand (external link) Document Search Copy Copied
Zuko Knowledge Base

Examples

Table of contents

  1. Single Page Form
  2. Single page Magento checkout (A)
  3. Single page Magento checkout (B)
  4. Multi-step form where URL changes between steps (A)
  5. Multi-step form where URL changes between steps (B)
  6. Multi-step form where URL remains the same between steps - form launched from button click

Single Page Form

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({
      target: document.getElementById('brochure-wrap'),
      slug: '8bba1fd1717006d7'
    }).trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: '8bba1fd1717006d7'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding tags to the page

Using GTM to fire tags, using URL begins with trigger

Screenshot of the activity tracking tag on page

Single page Magento checkout (A)

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({
      target: document.getElementById('firecheckout-form'),
      slug: 'b39161de1fbba086'
    })
    .setAttribute('AB Test', 'guest_button_fields_collapsed')
</script>

NOTE: Using .setAttribute() to pass AB test version to Zuko

NOTE: This form sends the form view event in a second tag below

Form View Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: 'b39161de1fbba086'}).trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: 'b39161de1fbba086'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding the tag to the page

Using GTM to fire tags. Firing rules:

  • Activity code: When URL begins with: https://www.example.com/firecheckout
  • Completion code: When URL begins with: https://www.example.com/order-confirmation

Screenshot of activity tracking tag on the page

Single page Magento checkout (B)

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({
      target: document.getElementById('checkout'),
      slug: '7f6938aa4577eeda'
    }).trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: '7f6938aa4577eeda'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding the tag to the page

Using GTM to fire tags, using URL begins with

Screenshot of activity tracking tag on the page

Multi-step form where URL changes between steps (A)

Tracking the first step.

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({
      target: document.getElementById('gform_12'),
      slug: '2b7ab25a30a729de'
    }).trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: '2b7ab25a30a729de'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding the tag to the page

Using GTM to fire tags

Screenshot of activity tracking tag on the page

Multi-step form where URL changes between steps (B)

Tracking the first step.

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({
      target: document.getElementById('form1'),
      slug: '9677b2c4bde881a2'
    }).trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: '9677b2c4bde881a2'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding the tag to the page

Using GTM to fire tags, using URL begins with and contains

Screenshot of activity tracking tag on the page

Multi-step form where URL remains the same between steps - form launched from button click

All steps tracked as one form.

Screenshot

Tags Used

Activity Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  var quickQuoteForm = Zuko
    .trackForm({
      target: document.getElementById('quick-quote'),
      slug: 'c201b535fe09faa4'
    });
</script>

NOTE: Zuko activity tracking is added to a variable quickQuoteForm to then use in the form view tracking tag

NOTE: This form sends the form view event when the button launches the form

Form View Tracking Tag 

<script>
  quickQuoteForm.trackEvent(Zuko.FORM_VIEW_EVENT);
</script>

Completion Tracking Tag 

<script src="https://assets.zuko.io/js/v2/client.min.js"></script>
<script>
  Zuko
    .trackForm({slug: 'c201b535fe09faa4'})
    .trackEvent(Zuko.COMPLETION_EVENT)
</script>

Adding the tag to the page

Using GTM to fire tags, using URL begins with, contains and DOMContentLoaded (following button click)

Screenshot of activity tracking tag on the page

Screenshot of form view tracking tag on the page