{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"A simple Attribution install","type":"basic","slug":"a-simple-attribution-install","excerpt":"Learn a basic javascript install","body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Bundling or Minifying Attribution code\",\n  \"body\": \"Do not minify or bundle inside a webpack the Attribution Javascript snippets or it may render unstable in some conditions. Also please try to avoid putting snippets inside a javascript enclosures. You are still free to call track() or identify() from inside your JS app\"\n}\n[/block]\nTo properly install Attribution, you will need to install Attribution code on your website, app, or server. This code will generate messages based on specific triggers you define.\n\nIn the simplest implementation, the code can be a snippet of Javascript that you copy and paste into the HTML of a website to track page views. However, Attribution can also be installed with a combination of apps like Google tag manager, Wordpress, Segment or Shopify. Attribution offers a number of integrations for different purposes. \n\nThe best way to learn about how Attribution works is to see it in action. This tutorial will take you through a basic client-side install of Attribution app. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Before you start\"\n}\n[/block]\nFirst thing is to consider your funnel or ad pipeline. The pipeline will typically begin with an ad click, then a landing page, then a conversion event. For example: \n\nA. Visitor clicks ad which redirects to www.example.com/fbaid=xyz \nB. Visitor lands on www.example.com/fbaid=xyz and submits web form with information\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4c691ca-Screen_Shot_2021-01-14_at_12.45.19_PM.png\",\n        \"Screen Shot 2021-01-14 at 12.45.19 PM.png\",\n        1440,\n        787,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen the snippet is in place and analytics.js properly runs Attribution will use the referring domain and destination domain to provide credit to specific channels & filters on the dashboard. Below you'll learn more about analytics.js and the necessary components for installing Attribution's tracking apparatus. \n[block:api-header]\n{\n  \"title\": \"Find your Attribution project ID\"\n}\n[/block]\nYou can find your project's unique Attribution ID by logging in and going to [Settings](https://dashboard.attributionapp.com/goto/settings/instructions) \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4fe1ff4-Screen_Shot_2021-01-14_at_12.51.07_PM.png\",\n        \"Screen Shot 2021-01-14 at 12.51.07 PM.png\",\n        1440,\n        790,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nThis is your unique project id that will be used with your snippet. Continue below to learn how to install your unique project snippet and start tracking visitors. \n\n\n[block:api-header]\n{\n  \"title\": \"Install page() to start tracking visits\"\n}\n[/block]\nCopy your Attribution snippet by going to [Settings](https://dashboard.attributionapp.com/goto/settings/instructions) \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b59d0d1-Screen_Shot_2021-01-14_at_12.55.42_PM.png\",\n        \"Screen Shot 2021-01-14 at 12.55.42 PM.png\",\n        1437,\n        786,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nNow paste the snippet from settings into the <head> tag of all your pages. Please note this assumes all your pages are on the same domain. If you'd like to track across multiple domains please be sure to use the [cross-domain snippet.](https://docs.attributionapp.com/docs/cross-domain-tracking) \n\nAssuming the same domain, the snippet will load analytics.js onto the page asynchronously, so it won’t affect your page load speed. Once the snippet is running on your site you will begin to start recording visits. \n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1f6b4c1-Screen_Shot_2021-01-14_at_1.05.06_PM.png\",\n        \"Screen Shot 2021-01-14 at 1.05.06 PM.png\",\n        1440,\n        792,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nNote: Analytics.js will record the referring domain and destination domain of the visit. For example, the referring domain may be www.google.com and the destination domain may be www.attributionapp.com/fbaid=123. Attribution's model will use these values to filter visits on the dashboard and provide credit for ads. \n\nVisitors will appear with anonymous visitor ids in your side bar when you drill into any blue number on the dashboard. Continue reading to learn how to give your visitors traits. \n[block:api-header]\n{\n  \"title\": \"Install identify() to give your visitors traits\"\n}\n[/block]\nThe identify method is how you tell Attribution who the current user is. It includes a unique User ID, and any optional traits you know about them. Calling Identify() is not a requirement for installing Attribution, but it will allow you to easily assign a User ID to your visitors and it will give you access to features like 'disregard existing users' & 'company based attribution' \n\nIf you don't call identify for anonymous visitors to your site. Attribution will automatically assign them an anonymousId, so just calling page and track works just fine without identify.\n\nHere’s what a basic call to identify might look like:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"attribution.identify('fbdzldwr', {\\n  name: 'Konstantin Pats',\\n  email: 'KPats:::at:::ee.com'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThat identifies Konstantin by his unique User ID (in this case, fbdzldwr, which is what you know him by in your database) and labels him with name and email traits.\n\nIf you do not have a database you can omit a unique user id and name & email will be used as the unique ID. **Identifying with name & email is also a requirement for some CRM and conversion connectors like Stripe, Pipedrive, Salesforce, and Hubspot. * \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"attribution.identify({\\n  name: 'Konstantin Pats',\\n  email: '[email protected]'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nPlease be sure to replace those hard-coded trait values with the variables that represent the details of the currently logged-in user!!\n\nTo do that, we recommend that you use a backend template to inject an identify call into the footer of every page of your site where the user is logged in. That way, no matter what page the user first lands on, they will always be identified. **You don’t need to call identify if your unique identifier (userId) is not known.\n**\nDepending on your templating language, your actual identify call might look something like this:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"attribution.identify(' {{user.id}} ', {\\n  name: '{{user.fullname}}',\\n  email: '{{user.email}}'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\nWith that call in your page footer, you successfully identify every user that visits your site.\n\nYou can find more details on calling Identify() with OAuth or jQuery [here.](https://docs.attributionapp.com/docs/identify) \n[block:api-header]\n{\n  \"title\": \"Installing track() to record events and build your model\"\n}\n[/block]\nThe track method is how you give Attribution a conversion event to measure return against. You can record specific conversion events like, 'trial started' or ' demo request' to measure the effectiveness of your ads on specific pipeline points; as well as revenue conversion events like 'order paid', 'subscription payment' or 'completed order' to record revenue in your model. \n\nHere’s what a call to track might look like when a user starts a trial:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"attribution.track('trial started', {\\n  plan: 'Blue'\\n});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThat’s just telling Attribution that your visitor just triggered the 'trial started' event and chose your hypothetical 'Blue' plan. \n\nIn Attribution you'll be able to filter your conversion events by these properties. For example you can see return on ad spend for your Facebook ads on users that had a trial started event specifically for the blue plan. \n\nTracking conversion events with revenue are unique. Any time a 'revenue' property is present in a track() event it will be considered revenue to be used in calculations and modeling. \n\nIn the example below the revenue of '22' would be used in the Attribution model to calculate return on ad spend for your dashboard. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"attribution.track('order complete', {\\n  revenue: '22',\\n  type: 'blue'\\n});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you wanted to deduct revenue in the case of a refund or return you can also call track with a negative revenue. For example, \"-22\" | revenue should always be sent in 00.00 format. \n\nTo get started, we recommend that you track just a few important events. You can always add more later!\n\nOnce you've successfully installed page(), identify(), and track() you have completed the installation of Attribution's tracking requirements and the next steps are connecting ad platforms and filtering visits. \n\n\n[block:api-header]\n{\n  \"title\": \"Recapping the install & connecting the dots\"\n}\n[/block]\nIn the example below you can see the visitor's step, what method should be called, and what would appear on the Attribution dashboard if called correctly. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4211f86-f2aab98-Screen_Shot_2020-07-17_at_6.51.49_PM_1.png\",\n        \"f2aab98-Screen_Shot_2020-07-17_at_6.51.49_PM (1).png\",\n        688,\n        564,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nAttribution methods as UI objects on your dashboard.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e34520d-8f3427e-Screen_Shot_2020-11-17_at_6.55.34_PM.png\",\n        \"8f3427e-Screen_Shot_2020-11-17_at_6.55.34_PM.png\",\n        1440,\n        787,\n        \"#333\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you have any questions please reach out to [email protected]","updates":[],"order":1,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"576c6f68a39bbf0e00db4d1e","parentDoc":null,"project":"560c93ad7e9b9d0d00ca81a2","createdAt":"2016-06-23T23:23:20.416Z","githubsync":"","__v":5,"category":{"sync":{"isSync":false,"url":""},"pages":["560c93b07e9b9d0d00ca81a8"],"title":"Get started here!","slug":"documentation","order":0,"from_sync":false,"reference":false,"_id":"560c93af7e9b9d0d00ca81a6","version":"560c93ae7e9b9d0d00ca81a5","__v":1,"createdAt":"2015-10-01T02:00:15.249Z","project":"560c93ad7e9b9d0d00ca81a2"},"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["560c93af7e9b9d0d00ca81a6","560c9d9399bb5a0d0044f220","560d76d899bb5a0d0044f307","560d76ee1ec45619006069ed","560d86e099bb5a0d0044f32e","560dba80373c0e0d0024ff3b","57c722ecdf19130e001fba5d","57c743d1b6f94a2200659903","58995ec083f743190077bbe2","5fabfb070e9b0600424707dd","60004359deee820012dc1efc","600060c72dcd9d002fa13656","6001ac08c104fe002b933b7c","6009604d81b288001417df30","60097b7be8ec1e00334419f6","600aa98de28fae003a33108a","600aa9ee7d3e350018e7d6e4","601176819ca8c90011cfe6ac","606eef795bb7ed00790e9e68","609bf103a1334800624b7541"],"_id":"560c93ae7e9b9d0d00ca81a5","project":"560c93ad7e9b9d0d00ca81a2","createdAt":"2015-10-01T02:00:14.709Z","releaseDate":"2015-10-01T02:00:14.709Z","__v":20},"user":"560c92f2ac2859170013faa3"}

A simple Attribution install

Learn a basic javascript install

[block:callout] { "type": "danger", "title": "Bundling or Minifying Attribution code", "body": "Do not minify or bundle inside a webpack the Attribution Javascript snippets or it may render unstable in some conditions. Also please try to avoid putting snippets inside a javascript enclosures. You are still free to call track() or identify() from inside your JS app" } [/block] To properly install Attribution, you will need to install Attribution code on your website, app, or server. This code will generate messages based on specific triggers you define. In the simplest implementation, the code can be a snippet of Javascript that you copy and paste into the HTML of a website to track page views. However, Attribution can also be installed with a combination of apps like Google tag manager, Wordpress, Segment or Shopify. Attribution offers a number of integrations for different purposes. The best way to learn about how Attribution works is to see it in action. This tutorial will take you through a basic client-side install of Attribution app. [block:api-header] { "type": "basic", "title": "Before you start" } [/block] First thing is to consider your funnel or ad pipeline. The pipeline will typically begin with an ad click, then a landing page, then a conversion event. For example: A. Visitor clicks ad which redirects to www.example.com/fbaid=xyz B. Visitor lands on www.example.com/fbaid=xyz and submits web form with information [block:image] { "images": [ { "image": [ "https://files.readme.io/4c691ca-Screen_Shot_2021-01-14_at_12.45.19_PM.png", "Screen Shot 2021-01-14 at 12.45.19 PM.png", 1440, 787, "#333" ] } ] } [/block] When the snippet is in place and analytics.js properly runs Attribution will use the referring domain and destination domain to provide credit to specific channels & filters on the dashboard. Below you'll learn more about analytics.js and the necessary components for installing Attribution's tracking apparatus. [block:api-header] { "title": "Find your Attribution project ID" } [/block] You can find your project's unique Attribution ID by logging in and going to [Settings](https://dashboard.attributionapp.com/goto/settings/instructions) [block:image] { "images": [ { "image": [ "https://files.readme.io/4fe1ff4-Screen_Shot_2021-01-14_at_12.51.07_PM.png", "Screen Shot 2021-01-14 at 12.51.07 PM.png", 1440, 790, "#333" ] } ] } [/block] This is your unique project id that will be used with your snippet. Continue below to learn how to install your unique project snippet and start tracking visitors. [block:api-header] { "title": "Install page() to start tracking visits" } [/block] Copy your Attribution snippet by going to [Settings](https://dashboard.attributionapp.com/goto/settings/instructions) [block:image] { "images": [ { "image": [ "https://files.readme.io/b59d0d1-Screen_Shot_2021-01-14_at_12.55.42_PM.png", "Screen Shot 2021-01-14 at 12.55.42 PM.png", 1437, 786, "#333" ] } ] } [/block] Now paste the snippet from settings into the <head> tag of all your pages. Please note this assumes all your pages are on the same domain. If you'd like to track across multiple domains please be sure to use the [cross-domain snippet.](https://docs.attributionapp.com/docs/cross-domain-tracking) Assuming the same domain, the snippet will load analytics.js onto the page asynchronously, so it won’t affect your page load speed. Once the snippet is running on your site you will begin to start recording visits. [block:image] { "images": [ { "image": [ "https://files.readme.io/1f6b4c1-Screen_Shot_2021-01-14_at_1.05.06_PM.png", "Screen Shot 2021-01-14 at 1.05.06 PM.png", 1440, 792, "#333" ] } ] } [/block] Note: Analytics.js will record the referring domain and destination domain of the visit. For example, the referring domain may be www.google.com and the destination domain may be www.attributionapp.com/fbaid=123. Attribution's model will use these values to filter visits on the dashboard and provide credit for ads. Visitors will appear with anonymous visitor ids in your side bar when you drill into any blue number on the dashboard. Continue reading to learn how to give your visitors traits. [block:api-header] { "title": "Install identify() to give your visitors traits" } [/block] The identify method is how you tell Attribution who the current user is. It includes a unique User ID, and any optional traits you know about them. Calling Identify() is not a requirement for installing Attribution, but it will allow you to easily assign a User ID to your visitors and it will give you access to features like 'disregard existing users' & 'company based attribution' If you don't call identify for anonymous visitors to your site. Attribution will automatically assign them an anonymousId, so just calling page and track works just fine without identify. Here’s what a basic call to identify might look like: [block:code] { "codes": [ { "code": "attribution.identify('fbdzldwr', {\n name: 'Konstantin Pats',\n email: '[email protected]'\n});", "language": "javascript" } ] } [/block] That identifies Konstantin by his unique User ID (in this case, fbdzldwr, which is what you know him by in your database) and labels him with name and email traits. If you do not have a database you can omit a unique user id and name & email will be used as the unique ID. **Identifying with name & email is also a requirement for some CRM and conversion connectors like Stripe, Pipedrive, Salesforce, and Hubspot. * [block:code] { "codes": [ { "code": "attribution.identify({\n name: 'Konstantin Pats',\n email: '[email protected]'\n});", "language": "javascript" } ] } [/block] Please be sure to replace those hard-coded trait values with the variables that represent the details of the currently logged-in user!! To do that, we recommend that you use a backend template to inject an identify call into the footer of every page of your site where the user is logged in. That way, no matter what page the user first lands on, they will always be identified. **You don’t need to call identify if your unique identifier (userId) is not known. ** Depending on your templating language, your actual identify call might look something like this: [block:code] { "codes": [ { "code": "attribution.identify(' {{user.id}} ', {\n name: '{{user.fullname}}',\n email: '{{user.email}}'\n});", "language": "javascript" } ] } [/block] With that call in your page footer, you successfully identify every user that visits your site. You can find more details on calling Identify() with OAuth or jQuery [here.](https://docs.attributionapp.com/docs/identify) [block:api-header] { "title": "Installing track() to record events and build your model" } [/block] The track method is how you give Attribution a conversion event to measure return against. You can record specific conversion events like, 'trial started' or ' demo request' to measure the effectiveness of your ads on specific pipeline points; as well as revenue conversion events like 'order paid', 'subscription payment' or 'completed order' to record revenue in your model. Here’s what a call to track might look like when a user starts a trial: [block:code] { "codes": [ { "code": "attribution.track('trial started', {\n plan: 'Blue'\n});\n", "language": "javascript" } ] } [/block] That’s just telling Attribution that your visitor just triggered the 'trial started' event and chose your hypothetical 'Blue' plan. In Attribution you'll be able to filter your conversion events by these properties. For example you can see return on ad spend for your Facebook ads on users that had a trial started event specifically for the blue plan. Tracking conversion events with revenue are unique. Any time a 'revenue' property is present in a track() event it will be considered revenue to be used in calculations and modeling. In the example below the revenue of '22' would be used in the Attribution model to calculate return on ad spend for your dashboard. [block:code] { "codes": [ { "code": "attribution.track('order complete', {\n revenue: '22',\n type: 'blue'\n});\n", "language": "javascript" } ] } [/block] If you wanted to deduct revenue in the case of a refund or return you can also call track with a negative revenue. For example, "-22" | revenue should always be sent in 00.00 format. To get started, we recommend that you track just a few important events. You can always add more later! Once you've successfully installed page(), identify(), and track() you have completed the installation of Attribution's tracking requirements and the next steps are connecting ad platforms and filtering visits. [block:api-header] { "title": "Recapping the install & connecting the dots" } [/block] In the example below you can see the visitor's step, what method should be called, and what would appear on the Attribution dashboard if called correctly. [block:image] { "images": [ { "image": [ "https://files.readme.io/4211f86-f2aab98-Screen_Shot_2020-07-17_at_6.51.49_PM_1.png", "f2aab98-Screen_Shot_2020-07-17_at_6.51.49_PM (1).png", 688, 564, "#333" ] } ] } [/block] Attribution methods as UI objects on your dashboard. [block:image] { "images": [ { "image": [ "https://files.readme.io/e34520d-8f3427e-Screen_Shot_2020-11-17_at_6.55.34_PM.png", "8f3427e-Screen_Shot_2020-11-17_at_6.55.34_PM.png", 1440, 787, "#333" ] } ] } [/block] If you have any questions please reach out to [email protected]