Before you begin

  • You'll need a website for your business.
  • You must be able to update your website's code.

Whether you can update the website code yourself, or need a developer's help, this code will need to be installed your site. This code is used to embed Qzzr quizzes and track customer journey milestones. This will allow us to optimize your Qzzr quiz to provide better insights, improve performance and facilitate smarter marketing.


Adding the Qzzr SDK to your website 

1. Locate the header code for your website 

Go to your website's code and find the header of your website. Find the <head></head> tags in your website code, or locate the header template in your CMS or E-commerce Platform. To learn where to find this template or code on platform specific web platforms see this article.

2. Copy the entire code and paste it in the header of your website

Paste the code at the bottom of the header section, just above the closing head tag.

<!-- Start Qzzr -->
<script>!function(Q,Z,z,R){R=Q[Z]=Q[Z]||function(){R.q.push(arguments)},
R.q=R.q||[],R(R,z)}(window,'qzzrEvents','YOUR_TOKEN');</script>
<script src="//edge.qzzr.co/lib/sdk.js" async></script>
<!-- End Qzzr -->

Be sure to replace the 'YOUR_TOKEN' with the token you get from your Account Manager. 



Embedding your quiz

1. Copy your embed code from your dashboard

It should look like this:

<qzzr-embed src="QUIZ_ID"></qzzr-embed>

Yours will have your unique quiz id in place of "QUIZ_ID". If you do not have a dashboard, you can get your embed code from your Account Manager.

2. Paste the embed code into the page where you want the quiz displayed



Tracking customer journey milestones

1. Decide what customer journey milestones you want to track

Add events to track specific customer milestones using the following syntax:

qzzrEvents(eventName: string, properties: object<string, string>)

Here is an example of an "Add to Cart" event:

qzzrEvents('Add to Cart', {
  product: {
    name: 'Pacaya Insulated Jacket (Hoodless) - Mens',
    id: 12345,
    price: 189.95,
    brand: 'Cotopaxi',
    category: "Men\'s > Jackets",
    variant: 'Gray',
    quantity: 1,
    coupon: ''
  }
});

You can name the event whatever makes sense for your customer journey. You can also add any number of properties to the milestone event. These properties will be available for analysis in conjunction with responses given in your Qzzr experience.

2. Implement the event code on your site

First you need to determine if event code will be executed on Page Load or when a customer performs an Inline Action on the page.

Track Event on Page Load: Choose this option if the action you care about can be tracked when someone lands on a certain page, like a confirmation page after completing a purchase.

Track Event on Inline Action: Choose this option if the action you want to track requires someone to click something (like an add to cart or purchase button).

  1. Paste your event code on the relevant page of your site. Make sure you've already placed the Qzzr SDK script in the header of your website and it is included on the page where this event will happen.
  2. For page load events: place the code just below the closing header section of the page (for many websites, this will be right after the opening <body> tag).
  3. For inline action events: add the event code between script tags next to the action you want to track (like a button). If you'd like your event to fire on specific button clicks, you'll have to update the code to tie an event to an action.

Standard Purchase Event

Use this standard format for purchase events to take advantage of advanced reporting, analysis and insights.

qzzrEvents('$purchase', {
    id: 'T1980',
    affiliation: 'Online Store',
    revenue: 35.43,  
    tax: 4.90,
    shipping: 5.99,
    coupon: 'AMIGOS20',
    products: [  
    {
      name: 'Pacaya Insulated Jacket (Hoodless) - Mens',    
      id: 12345,  
      price: 189.95,
      brand: 'Cotopaxi',
      category: "Men's > Jackets",
      variant: 'Gray',
      quantity: 1,
      coupon: ''
    },
    {
      name: 'Luzon 18L Daypack - Del Dia',
      id: 23456,
      price: 33.75,
      brand: 'Cotopaxi',
      category: 'Backpacks',
      variant: 'Wild Card',
      quantity: 1,
      coupon: ''
  }
  ]
});

Key purchase event properties:

  • id (required) - a unique transaction id created by your e-commerce platform
  • affiliation - to affiliate the purchase with a particular channel or entity
  • revenue - the total transaction value including tax and shipping
  • products (required) - a list of the products purchased
  • product.name (required) - the title of the product
  • product.id (required) - the unique product id in your system
  • variant - for products that come with more than one option like color or size

Associate milestone events with your customer identifiers (optional)

If you would like to associate the anonymous data from the Qzzr experience with your customer identifiers by calling $identify:

qzzrEvents('$identify', identifiers: object<string, string>)

Here is an example of sending in a customer id :

qzzrEvents('$identify', {
  id: '12345'
});

You can pass in any identifier you wish (email address, customer id, device id, or whatever you use in your system of record to identify your customers.)

If your site uses a tag manager or a popular CMS or E-Commerce platform view this article.

Did this answer your question?