{"id":23050814,"url":"https://github.com/geta/geta-gtm-ecommerce","last_synced_at":"2025-10-29T01:05:21.132Z","repository":{"id":30834115,"uuid":"34391538","full_name":"Geta/geta-gtm-ecommerce","owner":"Geta","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-07T20:40:33.000Z","size":386,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-02-08T17:44:49.107Z","etag":null,"topics":["analytics","commerce","marketing"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Geta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-22T13:21:29.000Z","updated_at":"2021-10-21T10:21:03.000Z","dependencies_parsed_at":"2023-01-14T17:47:05.727Z","dependency_job_id":null,"html_url":"https://github.com/Geta/geta-gtm-ecommerce","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-gtm-ecommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-gtm-ecommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-gtm-ecommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-gtm-ecommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geta","download_url":"https://codeload.github.com/Geta/geta-gtm-ecommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933354,"owners_count":20857052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","commerce","marketing"],"created_at":"2024-12-15T23:38:07.550Z","updated_at":"2025-10-29T01:05:21.027Z","avatar_url":"https://github.com/Geta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Geta.GTM.Ecommerce\n\n![](http://tc.geta.no/app/rest/builds/buildType:(id:GetaPackages_EPiTracking_00ci),branch:master/statusIcon)\n\n## Description\nModule for enhanced Ecommerce tracking through Google Tag Manager. \n\n## Features\nThe enhanced e-commerce tracking is complex and can consist of many different elements. We have therefore created a standard version building on these features: \n*\tImpressions\n*   Product clicks\n*\tAdd to cart\n*   Remove from cart\n*\tCheckout\n*\tTransactions\n\n## Package maintainer\nhttps://github.com/marijorg\nand\nhttps://github.com/milosmalic\n\n## Installation - How to get started?\nStart by installing NuGet package (use [NuGet](http://nuget.episerver.com/)):\n\n    Install-Package Geta.GTM.Ecommerce\n    \nStep two is to add two partials to your Layout file (see details below). These partials wraps the two js-sections described in [Google's Quick Start Guide](https://developers.google.com/tag-manager/quickstart). Make sure you replace **GTM-XXXXXXX** with your Google Tag Manger code (container id) - ideally by reading the tag code from an appSetting.\n\n```C#\n\u003c!-- Add the following as close to the opening \u003chead\u003e tag as possible, replacing GTM-XXXX with your container ID --\u003e\n@Html.Partial(\"_GoogleTagManagerStart\", \"GTM-XXXXXXX\")\n```\n\n```C#\n\u003c!-- Add the following immediately after the opening \u003cbody\u003e tag, replacing GTM-XXXX with your container ID. --\u003e\n@Html.Partial(\"_GoogleTagManagerNoScript\", \"GTM-XXXXXXX\")\n```\n    \nNext step is to add the following at the bottom of your layout file (after jquery): \n```html\n\u003c!-- Add required script --\u003e \n\u003cscript src=\"~/Scripts/Geta.GTM.Ecommerce/geta.productImpressions.js\"\u003e\u003c/script\u003e\n```\n\n### Pro tip: Google Analytics debugger - a time saver\nEcommerce is not part of real time tracking in Google Analytics. To save valueable time debugging you should install the [Google Analytics Debugger chrome extension](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna). It prints useful information to the Javascript console.  These messages include error messages and warnings which can tell you when your analytics tracking code is set up incorrectly.\n\n## How does it work\nThe implementation picks up product data by reading certain data attributes in the html. This way the module can be reused for different view model and view technologies (Razor view, Angular, React etc..)\n\nAdd the following script to track product impressions and product clicks: \n```html\n\u003cscript\u003e\n    \u003c!-- Using the module - track product impressions and product clicks --\u003e \n        var tracker = new GtmTrackingProduct();         \n        tracker.trackImpressions();\n        tracker.trackProductClicks('.jsSearch'); // css container for product lists\n\u003c/script\u003e\n```\n### Product impressions and clicks\nThe implementation will look for attribute with name **data-gtmproduct** and expects the content of the attribute to be serlialized json product data. See [quicksilver example code](QuickSilver%20examples/examples.md) and refer to [Google developer documentation] (https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#ecommerce-data) for details about the different fields. \n\nExample json:\n```json\n{\"id\":\"P-38426422\", \n \"name\":\"Short Sleeve Crew Tee\",\n \"price\":30.5,\n \"category\":null,\n \"brand\":\"Fruit of the Loom\",\n \"variant\":null,\n \"position\":0,\n \"quantity\":0}\n```\n\nIn addition, the implementation will look for two more attributes: **data-gtmcurrency** and **data-gtmproduct-list**:\n\n```html\n\u003c!-- the selected currency --\u003e\n\u003cdiv data-gtmcurrency=\"NOK\"\u003e\n```\n```html\n\u003c!-- the current list category name --\u003e\n\u003ch1 data-gtmproduct-list=\"Womens\"\u003eWomens\u003c/h1\u003e\n```\n#### Sorting, filtering and paging/autoscroll\nBy default, products visible on page load are sent as impressions to google. If you change the view based on filter or sorting, or add more items, typically through auto-scroll or paging functionality you can call the **addImpressions** util method. \n```js\n var tracker = new GtmTrackingProduct();\n tracker.addImpressions(newElements, counter); \n```\n**newElements** - typically a selection of elements with data-gtmproduct \n```js\n var newElements = $(result).find('[data-gtmproduct]');\n```\n **counter** - nr of products already visible on the page (0 when sorting/filtering, \u003e0 when paging/autoscroll)\n```js\n var counter = $(\"*[data-gtmproduct]\").length;\n```\nClick [here](/QuickSilver%20examples/examples.md#handling-autoscroll-sorting-and-filtering) for an example based on the Episerver QuickSilver site. \n\n## Add/Remove from cart\nWhen adding removing from cart you need to call **sendCartEvent** method:\n```js\n sendCartEvent = function (products, eventName)\n```\n**products** - parsed product json - remember to set quantity\n**eventName** -  'addToCart' or 'removeFromCart'\n\nTo avoid impression tracking of cart items I suggest using a different data attribute name for the cart items: \"data-gtmcartitem\". \nA simple example that assumes that your addToCart item has a class 'jsAddToCart':\n\n```js\n    $('.jsAddToCart').click(function () {\n        var dataAttributeName = 'data-gtmcartitem';\n        \n        var tracker = new GtmTrackingProduct();\n        // use helper method to parse data\n        var product = tracker.parseDataAttribute(this, dataAttributeName);\n\n        if (product != null) {\n            product.quantity = 1; // could be set from input if possible to add more items at once \n            tracker.sendCartEvent([product], \"addToCart\");\n        }\n    });\n```\n\nSee [QuickSilver](/QuickSilver%20examples/examples.md#handling-autoscroll-and-product-impressions) for a complete example.\n\n## Transactions (purchase)\nTransactions are typically tracked on your order confirmation page (at the bottom of the page).\n**Note:** The track() method uses a cookie in order to prevent duplicate transaction data.\n```js\n\u003cscript src=\"~/Scripts/Geta.GTM.Ecommerce/geta.transaction.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n\n        var products = @Html.Raw(transactionProducts);\n\n        var transaction = {\n            \"id\": \"@Model.OrderId\",\n            \"affiliation\": \"Quick Silver demo site\",\n            \"total\": \"@Model.CartTotal.Amount.ToString(\"0.00\", CultureInfo.InvariantCulture)\",\n            \"shipping\": \"@Model.ShippingTotal.Amount.ToString(\"0.00\", CultureInfo.InvariantCulture)\",\n            \"tax\": \"@Model.TaxTotal.Amount.ToString(\"0.00\", CultureInfo.InvariantCulture)\",\n            \"coupon\" : \"\"\n        };\n\n        var gtmTransaction = new GtmTransaction();\n        gtmTransaction.track(transaction, products);\n\n    \u003c/script\u003e\n```\n\n\n\n## Setting up Google Tag Manager\nPrerequsites: Google Analytics and Google Tag Manager Account.\nYou can import predefined tags and events following this recipie:  \n 1. In GTM, Admin --\u003e Import Container: Choose demo.gtm.container.json as container file\n 2. Choose 'Existing' (DefaultWorkspace as Workspace and 'merge')\n 3. In GTM, Workspace --\u003e Variables --\u003e Set value for GAUserId to your Google Analytics tracking id.\n\nHere is how the 'Tags' overview should look like.\n\nNote: If you don't want to import, you need to setup the required tags and event your self. \nIf you do so, make sure you use the follow event names: 'impressions', 'addToCart', 'removeFromCart', 'checkout', 'productClick'\n\n## More examples\nSee [examples](QuickSilver%20examples/examples.md) for more hands on examples on using the module and generating json objects.\n\n## Changelog\n\n[Changelog](CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeta%2Fgeta-gtm-ecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeta%2Fgeta-gtm-ecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeta%2Fgeta-gtm-ecommerce/lists"}