We are here to help

What is Google Tag Manager (GTM)?

Google provides an awesome tool called Google Tag Manager for managing tags used for tracking and analytics of websites. Right now you can use that tool inside your LIVE and VOD events and even during the checkout process.

A tag management system is designed to help manage the life-cycle of e-marketing tags (sometimes referred to as tracking pixels or web beacons), which are used to integrate third-party software into digital properties.

*Right now you can use that tool inside your LIVE and VOD events and even during the checkout process.


How to add GTM scripts into Live/VOD/login/checkout pages?

It is really a simply process. Just create your GTM account and add your GTM-ID in the Cleeng dashboard under, "Publisher settings” page.

After that we will take the rest, the code will be automatically be added to Live/VOD pages and inside your checkout process including login page.


Firstly let's update the Publisher settings profile for GTM support, here's how:

  1. Get your GTM-ID from Google Tag Manager panel gtm1.PNG
  2. Log in to your Broadcaster Dashboard.
  3. Click "Settings" > "Publisher Profile".
  4. Please add your GTM ID. gtm2.PNG
  5. Save changes.
  6. All done.


Let’s check if everything is setup correctly

Google Tag Manager’s preview mode allows you to browse a site on which your container code is implemented as if the current container draft was deployed. Sites with preview mode enabled will display a debugger pane below the website content so that you can inspect which tags fired and in which order.

Enable preview mode
To enable preview mode, click on the arrow next to the publish button and select Preview.


Use preview mode
Once the preview mode is enabled, navigate to your event page (Broadcaster Dashboard > My Offers) where the container is implemented and you will see a debug console window at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed. This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors.


More information about preview mode and debugging you can find here: https://support.google.com/tagmanager/answer/6107056?hl=en


Events fired on Cleeng pages

Cleeng firing events for the most important places of login and checkout process. Based on that events you will be able to configure tags on each step of login and checkout process.

Here is a list of custom events fired by Cleeng:

  1. viewEvent - View event - it is fired when someone open event page on Cleeng website
  2. buyButtonClick - Buy button click - it is fired when someone clicked on buy event button
  3. registrationComplete - fired when registration is completed
  4. alreadyRegisterd - fired when user was already registered and he just logged in
  5. multiOfferPage - fired on multi offer page
  6. cleengCapture - fired on cleeng capture
  7. selectedMethodView - fired on select payment method page
  8. paymentInfoView - fired on payment view with form for payment
  9. paymentInfoSubmit - fired when user submit his credit card information
  10. purchaseComplete - when purchase is completed


How to fire a tags on those custom events?

To fire a tags on that event firstly you have to create triggers for custom event fired by cleeng which are interesting for you. Assume that we are going to react on buyButtonClick, registrationComplete, paymentInfoView, purchaseComplete events.


Let’s create triggers for that

  1. Open you GTM account and go to “Triggers” section
  2. Click “New”                            gtm5.PNG
  3. Create new trigger for buyButtonClick
  4. Set a name for a new event (for example: Buy Button Click Event)
  5. Choose trigger type and set “Custom Event”
  6. Set event name: buyButtonClick   gtm6.PNG
  7. Repeat points 2-6 for each custom event which you are interested.


Use just created triggers for firing tags

  1. Open you GTM account and go to “Tags” section
  2. Create new Tag for “Buy Button Click Event”
  3. Set a name for a new tag (for example: Buy Button Click)
  4. Click on tag section and choose “Custom HTML”
  5. Paste example code. It could be simple script with console.log.  gtm7.PNG
  6. In the “Triggering” section choose previously created trigger  gtm8.PNG
  7. Save Tag
  8. Refresh preview mode  gtm9.PNG
  9. It’s Done! Check your new functionality in reality. It will be visible just for you (preview mode) for publishing changes for everyone check “Publishing changes” section.



Variables are name-value pairs for which the value is populated during runtime. For example, the predefined variable named "url" has been defined such that its value is the current page URL.
Variables are used in triggers and in tags. In triggers, they are used to define filters that specify when a particular should be executed (e.g.: to execute a pageview trigger when the url variable is “example.com/index.html”). In tags, variables are used to capture dynamic values (e.g.: passing the transaction value and products purchased to a conversion tracking tag).

Additional variables

Cleeng exposing additional variables which can be consume by GTM in easy way.
Here is a list of exposed data:

  1. Offer title - name of the property in GTM:offerTitle
  2. Offer description- name of the property in GTM:offerDescription
  3. Offer id - name of the property in GTM: offerId
  4. Offer currency - name of the property in GTM: offerCurrency
  5. Offer price - name of the property in GTM: offerPrice
  6. View name - name of the property in GTM: viewName

How to add Cleeng additional variable:
Let’s define user-defined variables

  1. Open you GTM account and go to “Variables” section
  2. Create NEW User-defined Variable for “offerTitle”
  3. Set a name for a new tag (for example: EVENT_TITLE)
  4. Choose “Data Layer Variable” variable type
  5. Set name of the property from dataLayer:offerTitle gtm10.PNG
  6. Save it.

Right now you can use new variable in brackets syntax {{EVENT_TITLE}} in your tags.
For example in Custom HTML tags you can use it in that way:  gtm11.PNG


Publishing changes

When you are ready to publish changes and everything is well tested by you, one thing you need to do is click on the SUBMIT button.








Was this article helpful?
0 out of 0 found this helpful