Google Tag Manager Integration

Google Tag Manager is a free tool that allows creators to manage and deploy marketing tags (code snippet) on your Knorish site without the need to modify any code on the site.

With Knorish, Google Tag Manager Integration is a simple process which makes tracking the data super easy without the need for coders or developers.  

Pro Tip: Add the Google Tag Assistant on chrome as an extension from this link: Tag Assistant (by Google). This extension helps you check and track where all is the tag firing.

Setup Google Tag Manager

To set up your Google Tag, head to Google Tag Manager and sign up if you don’t have an account already. 

  1. Post sign up on Google Tag Manager, complete the details of your account.
  2. Type in the name of your account. This can be any name as you wish. 
  3. Select the country from the drop down.
  4. Type in the name for your container (you can pick any name you'd like or simply type in the URL of your academy). 
  5. Ensure to choose Web under "where to use container" and then click on Create. 
  6. On the Google Tag Manager Terms of Service Agreement pop up, read through the terms and conditions, once done, select the “I accept the terms and conditions’ acceptance statement. 
  7. Click on Yes on the top right. 

Note: You may see a pop up for the G Tag Manager code asking you to copy and paste the code across the header and the footer. For Knorish, ignore this as the process is much simpler.

 

Google Tag Manager Page

The Google Tag Manager Id (Alphanumeric ID) listed on the page (as shown in the image above) is all that you require. 

Google Tags Manager Installation On Your Knorish Site

  1. Sitewide Integration

    1. Login to your Knorish account
    2. Access the Integrations section in Settings available under the dashboard

    3. Under Google Tag Manager Integration, simply paste the Tag manager code received (including the GTM initials) and the integration will be completed.
    4. With this integration, the Tag will fire on all the pages including site, sign up,  payment page and pages post student login as well. 

2. HTML Snippet based Integration


While this is another way of adding the Tag manager code to the site and this is perfectly fine as well. However, this method of integration will not fire beyond the landing page. This means Snippet Code (HTML code) based integration can be used to track user behaviour on all pages on your site. You have the option to install Google Tag Manager in header and footer code. The process remains the same.


3. Adding Google Tag Manager to Your Site via Header Code and Body End Code

    1. Go to Website Builder
    2. Select Custom Code
    3. On this page, select Header Code or Body End code based on where you want the tag to be placed. 
    4. Under ‘Embed code on every page’, in a new line, paste the Header code here and click save.

4. Installing tags on specific pages

Install GTAg with HTML Code

    1. Access the Pages section in the dashboard
    2. Open the edit mode
    3. Paste the code in the custom header or footer code.

5. Testing Google Tag Manager

GTAG Testing

Once the tag manager has been added in the page, you can add the Google Tag Assistant on chrome as an extension from this link: Tag Assistant (by Google).

  1. Logout from your site
  2. Sign in on your site as a student with a new email ID
  3. Visit different pages and as you view different pages, you will see that the tag is firing across pages. 
  4. Additionally, you can also embed the code sitewide under Custom Code in Website Builder. However, this method will have the same limitation of not being able to track beyond the landing pages i.e. the signup, payment etc pages will not be tracked

Google tag manager events on Knorish

  1. view_item
    A user views product or item details.
    Code location
    Root > Views > Page > Page.cshtml

    Code used

gtag('event', 'view_item', {

  "items": [

    {

      "id": "P12345",

      "name": "Android Warhol T-Shirt",

      "price": '2.0'

    }

  ]

});


    2. add_to_cart
    A user adds items to cart.

    Code location
    Root > Content > User > user.js


    Code used

    gtag('event', 'add_to_cart', {

      "value": 23.07,

      "currency": "USD",

      "items": [

        {

          "id": "P12345",

          "name": "Android Warhol T-Shirt",

          "price": '2.0'

        }

      ]

    });

     

    3. Add_to_wishlist
    A user adds items to wishlist.

    Code location
    Root > Content > User > user.js

    Code used

    gtag('event', 'add_to_wishlist', {

      "value": 23.07,

      "currency": "USD",

      "items": [

        {

          "id": "P12345",

          "name": "Android Warhol T-Shirt",

          "price": 2

        },

        {

          "id": "P67890",

          "name": "Flame challenge TShirt",

          "price": 3

        }

      ]

    });


    4. Begin_checkout 
    A user begins checkout.

    Code location
    Root > Content > User > user.js

    Code used

     

    gtag('event', 'begin_checkout', {

      "value": 23.07,

      "currency": "USD",

      "items": [

        {

          "id": "P12345",

          "name": "Android Warhol T-Shirt",

          "price": '2.0'

        }

      ],

      "coupon": ""

    });

     

    5. Purchase
    A user completes a purchase.

    Code location
    Root > Content > User > user.js

    Code used

    gtag('event', 'purchase', {

      "transaction_id": "24.031608523954162",

      "value": 23.07,

      "currency": "USD",

      "items": [

        {

          "id": "P12345",

          "name": "Android Warhol T-Shirt",

          "price": '2.0'

        },

        {

          "id": "P67890",

          "name": "Flame challenge TShirt",

          "price": '3.0'

        }

      ],

      "coupon": ""

    });