Installation and configuring plug-in Tracking Code Manager

1. How to add your own custom tracking code
2. How to add Facebook Pixel
3. How to add AdWords Remarketing Tag (Google Dynamic Remarketing) (old format)
4. How to add Google Dynamic Remarketing (new format)
5. How to add Google Tag Manager
6. List of available tokens 
7. Custom tokens for the order completed page (nop 4.40 and never versions) 

1. How to add your own custom tracking code

You can set the place and page for your own tracking code. You can use tokens for sending information about customer activity. Press the button 'Add new' and select 'Custom' from the list. Provide the name of this tracking code. If you need to use unique ID for your tracking service you can provide it in the filed 'MerchantId'. Press the Save button.

On the next page you can set JavaScript code and set the place and page.

2. How to add Facebook Pixel

Plugin adds tracking code to ALL nessesary pages (ex. product, category, manufacturer, vendor pages, customer registration page, cart page, wishlist page, search page, order complited page, home page, article, blog and news pages, etc.).

Plugin adds new custom tracking code 'ViewCategory' for advanced custom activity too. You can read about custom tracking code on this page https://developers.facebook.com/docs/marketing-api/dynamic-product-ads/product-audiences/v2.9

Press the button 'Add new' and select 'Facebook Pixel' from the list. Provide the name of this tracking code and set your Facebook Pixel ID in the filed 'MerchantId'. Press the Save button.

You can select the product ID value from the list if you use another value.

If you need to change the source code of JavaScript you can check 'HideTrackingScript' and change it. You will see tokes for this JavaScript code too.

That's all!! You can opent product and category pages, cart page and check tracking code.

Facebook Pixel for 'Purchase' track.

for one product

fbq('track', 'Purchase', {
content_name: 'Custom T-Shirt',
content_category: 'Apparel >> Clothing',
contents: [
{ 'id': '29', 'quantity': 2, 'item_price': 15.00 }
],
content_type: 'product',
value: 30.00,
currency: 'USD'
});

for several products

fbq('track', 'Purchase', {
contents: [
{ 'id': '29', 'quantity': 2, 'item_price': 15.00 },
{ 'id': '30', 'quantity': 1, 'item_price': 43.50 },
{ 'id': '25', 'quantity': 1, 'item_price': 27.56 }
],
content_type: 'product',
value: 114.39,
currency: 'USD'
});

Note for developers!!!
If you want to use AddToCart pixel on fly plugin adds JavaScript array FaceBookProductImpressions with list of products on the page.

Example

<script type="text/javascript">
FaceBookCurrencyCode = 'USD'
FaceBookProductImpressions = [
{
  'id': 3,
  'productkey': '3',
  'name': 'Lenovo IdeaCentre 600 All-in-One PC',
  'price': '500.00',
},{
  'id': 10,
  'productkey': '10',
  'name': 'Adobe Photoshop CS4',
  'price': '75.00',
},{
  'id': 4,
  'productkey': '4',
  'name': 'Apple MacBook Pro 13-inch',
  'price': '1800.00',
},{
  'id': 5,
  'productkey': '5',
  'name': 'Asus N551JK-XO076H Laptop',
  'price': '1500.00',
},{
  'id': 1,
  'productkey': '1',
  'name': 'Build your own computer',
  'price': '1200.00',
},{
  'id': 2,
  'productkey': '2',
  'name': 'Digital Storm VANQUISH 3 Custom Performance PC',
  'price': '1259.00',
}];
</script>


You can add this JQuery function and add pixel on button "Add to cart"

Example

(function() {
        //addToCart
        $('.add-to-cart-button, .product-box-add-to-cart-button').each(function () {
        var productid = $(this).data("productid");
        if (productid == undefined) {
            var script = $(this).attr("onclick");
            if (script.length > 0) {
                //productid = parseInt(script.replace(/[^0-9]/g, ''));
                productid = script.match(/\d+/g).map(Number)[0];
    }
            if (productid > 0) {
                $(this).click({ productid: productid }, function (event) {
                    event.preventDefault();
        var products = $.grep(FaceBookProductImpressions, function (e) { return e.id == productid; });
       if (products.length > 0) {
    fbq('track', 'AddToCart', {
    content_ids: [products[0].productkey],
    content_type: 'product',
    value: products[0].price,
    currency:  FaceBookCurrencyCode
    });
    }
                });
            }
        });
})();

3. How to add AdWords Remarketing Tag (Google Dynamic Remarketing)

Plugin adds tracking code to product, category, manufacturer, vendor pages, cart page, wishlist page, search page, order complited page, home page, article, blog and news pages. Press the button 'Add new' and select 'Google Dynamic Remarketing' from the list. Provide the name of this tracking code and set your AdWord campaign ID in the filed 'MerchantId'. Press the Save button.

You can select the product ID value from the list if you use another value.

If you need to change the source code of JavaScript you can check 'HideTrackingScript' and change it. You will see tokes for this JavaScript code too.

That's all!! You can opent product's page and cart page and check tracking code.

4. How to add Google Dynamic Remarketing (new format)

Plugin adds tracking code to all pages (product, category, manufacturer, vendor pages, cart page, wishlist page, search page, order complited page, home page, article, blog and news pages, etc.) Press the button 'Add new' and select 'Google Dynamic Remarketing' from the list. Provide the name of this tracking code and set your Tag Manager ID in the filed 'MerchantId'. Press the Save button.

You can select the product ID value from the list if you use another value.

Category (Manufacturer, Vendor) page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'category'
});

</script>

Product page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'product',
'ecomm_prodid': '18',
'ecomm_totalvalue': 245.00,
'ecomm_category': 'Cell phones'
});

</script>

Home page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'home'
});

</script>

Shopping cart page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'cart',
'ecomm_prodid': ['1'],
'ecomm_totalvalue': 1500.00
});

</script>

Order completed page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': ['1'],
'ecomm_totalvalue': 1350.00
});

</script>

Search page

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'searchresults'
});

</script>

Another pages

<!--Global site tag (gtag.js) - AdWords: 123456789 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=123456789"></script>
<script data-fixedscript="1">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '123456789');
</script>
<script data-fixedscript="1">
gtag('event', 'page_view',
{'send_to': '123456789',
'ecomm_pagetype': 'other'
});

</script>

5. How to add Google Tag Manager

Plugin adds tracking code to all pages (product, category, manufacturer, vendor pages, cart page, wishlist page, search page, order complited page, home page, article, blog and news pages, etc.) Press the button 'Add new' and select 'Google Tag Manager' from the list. Provide the name of this tracking code and set your Tag Manager ID in the filed 'MerchantId'. Press the Save button.

You can select the product ID value from the list if you use another value.

Each Data Layer object has mimimum three values for each pages (PageType, PageUrl, UserType, email).

%AccessControlGroupName% - Admin, Vendor, Guest, Registered, Unknown (Customer's role)

For Home page

dataLayer.push({
'PageType':'HomePage',
'PageUrl': 'your page url',
'UserType': '%AccessControlGroupName%',
'email': 'email address of the user'
});

Plugin will try to set e-mail address of customer, but if customer is Guest plugin will use static value 'guest'.

Example

dataLayer.push({
'PageType':'HomePage',
'PageUrl': 'http://www.yourstore.com',
'UserType': '%AccessControlGroupName%'
'email': 'guest'
});

For Category page

dataLayer.push({
    'PageType':'CategoryPage',
    'PageUrl':'http://www.yourstore.com/cell-phones',
    'UserType': '%AccessControlGroupName%'
    'email': 'admin@yourStore.com',
    'CategoryID': '7',
    'CategoryName': 'Cell phones',
ProductIDList: ['18','19','20']
});

For Manufacturer page

dataLayer.push({
    'PageType':'ManufacturerPage',
    'PageUrl':'http://www.yourstore.com/hp',
    'email': 'admin@yourStore.com',
    'ManufacturerID': '7',
    'ManufacturerName': 'hp', 

ProductIDList: ['18','19','20'] });

For Vendor pages

dataLayer.push({
    'PageType':'VendorPage',
    'PageUrl':'http://www.yourstore.com/hp',
    'UserType': '%AccessControlGroupName%',
    'email': 'admin@yourStore.com',  
    'VendorID': '7',
    'VendorName': 'hp',
     ProductIDList: ['18','19','20'] });

For Product page

dataLayer.push({
    'PageType':'ProductPage',
    'PageUrl':'http://www.yourstore.com/htc-one-mini-blue',
    'UserType': '%AccessControlGroupName%',
    'email': 'admin@yourStore.com',  
    'ProductID': '19'
});

For product tag page

dataLayer.push({
    'PageType':'ProductTagPage',
    'PageUrl':'http://demo410.yourStore.com/en/cool',
    'UserType': '%AccessControlGroupName%',
    'email': 'admin@yourStore.com',
    'ProductTagId': '3',
    'ProductTagName': 'cool',
ProductIDList: ['25','21','29','2','8','16']
});

For Search page

dataLayer.push({
'PageType':'SearchPage',
'PageUrl':'http://www.yourstore.com/search',
 'UserType': '%AccessControlGroupName%',
'email': 'email address of the user',
'ProductIDList' : ['ProductID_1', 'ProductID_2', 'ProductID_3']
});

For Shopping cart page

var cart_product_list = [];
cart_product_list.push(
     { id: '18', quantity: 1 },
     { id: '16', quantity: 1 }
);

dataLayer.push({
    'PageType':'Cart',
    'PageUrl':'http://www.yourstore.com/cart',
    'UserType': '%AccessControlGroupName%',
    'email': 'admin@yourStore.com',
    'value': '775.00',
    'currency': 'USD',
    'ProductIDList': cart_product_list
});

For Order Completed page

var order_product_list = [];
order_product_list.push(
     { id: '18', price: 245.00, quantity: 1 },
     { id: '16', price: 530.00, quantity: 1 }
);
var order_discounts_applied_list = [];
order_discounts_applied_list.push(
     { id: '1', discount_name: 'Sample discount with coupon code', discount_type: 'amount', discount_code: '123'}
);
dataLayer.push({
    'PageType':'OrderCompletedPage',
    'PageUrl':'http://www.yourstore.com/checkout/completed/',
    'UserType': '%AccessControlGroupName%',
    'email': 'admin@yourStore.com',
    'value': '697.50',
    'currency': 'USD',
    'orderid': 101,    
    'OrderDiscountsApplied': order_discounts_applied_list,
    'ProductIDList': order_product_list
});
dataLayer.push({
    'transactionId': '132',
    'transactionTotal': 503.71,
    'transactionTax': 0.00,
    'transactionShipping': 103.71,
    'transactionProducts': [
     { 'sku': '19', 'name': 'HTC One Mini Blue', 'price': 100.00, 'quantity': 4 }
    ]
});

For first checkout page

    dataLayer.push({
    'PageType': 'InitiateCheckout',
    'PageUrl':'http://www.yourstore.com/checkout',
    'email': 'email address of the user',
    });

For customer completed registraction page

    dataLayer.push({
    'PageType': 'CompleteRegistrationPage',
    'PageUrl':'http://www.yourstore.com/registered',
    'email': 'email address of the user',
    });


For another pages we use the next mapping for PageType value

Articles -> ArticleViewPage
News-> NewsViewPage
Blogs-> BlogViewPage
Topics-> TopicViewPage
another pages -> ViewPage 

    dataLayer.push({
    'PageType': 'ViewPage',
    'PageUrl':'http://www.yourstore.com/topic',
    'email': 'email address of the user',
    });

6. List of available tokens.

If you plan you use your own tracking script plugin supports several own tokens. These tokens help you to pass parameters in tracking service.

%MerchantId% - MerchantId
%OrderTotal% - Order Total
%OrderTotalInCustomerCurrency% - Order Total in customer currency
%NetProfit% - Order Total – combined product cost – taxes - shipping
%OrderTaxTotal% - Order TAX Total
%OrderShippingTotalInclTax% - Order Shipping Total Include Tax
%OrderShippingTotalExclTax% - Order Shipping Total Exclude Tax
%OrderId% - Order ID
%UniqueUserId% Unique user id
%CustomerFullName% - customer's full name
%CustomerEmail% - buyer email address
%CustomerPhoneNumber% - the customer's phone number
%ProductId% - the first product ID from the order or ID of the product on product page
%ProductName%  - the price of the product on the product details page
%ProductUrl%  - the Url of the product on the product details page
%ProductPictureUrl%  - the picture Url of the product on the product details page
%Quantity% - quantity for the first product from the order
%Currency% - currency code
%AllCustomerRoles% - the list of customer roles with comma sepator, ex.  'Administrators,Forum Moderators,Registered'
%PageType% - type of pages, ex. cart, wishlist, search, product, category, manufacturer, vendor, ordercompleted, homepage, completeregistration, initiatecheckout, news, blog, article, anotherpage, etc.
%Facebook.Pixel% - Special token for Facebook Pixel
%GoogleDynamicRemarketing% - Special token for Google Dynamic Remarketing

This tokens are case-sensitive.
if you need to add new tokens write us too.

7. Custom tokens for the order completed page (nop 4.40 and never versions).

You could add any custom tokens of the order completed page.
The plugin runs the command
await _eventPublisher.EntityTokensAddedAsync(order, tokens);
You could add the subscriber for this event and add the custome code for any custom token.