diff --git a/Integrations/Analytics/Google Site Tag/.gitignore b/Integrations/Analytics/Google Site Tag/.gitignore new file mode 100644 index 0000000..b7ff13a --- /dev/null +++ b/Integrations/Analytics/Google Site Tag/.gitignore @@ -0,0 +1 @@ +.DS_STORE \ No newline at end of file diff --git a/Integrations/Analytics/Google Site Tag/License b/Integrations/Analytics/Google Site Tag/License new file mode 100644 index 0000000..02ad1fa --- /dev/null +++ b/Integrations/Analytics/Google Site Tag/License @@ -0,0 +1,13 @@ +Copyright 2017 Optimizely Inc + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. \ No newline at end of file diff --git a/Integrations/Analytics/Google Site Tag/README.md b/Integrations/Analytics/Google Site Tag/README.md new file mode 100644 index 0000000..bd32352 --- /dev/null +++ b/Integrations/Analytics/Google Site Tag/README.md @@ -0,0 +1,53 @@ +## Prerequisites + +This integration is aimed at customers who are using Google Analytics and have transitioned to the new [Google Site Tag tracking code](https://developers.google.com/analytics/devguides/collection/gtagjs/). + +The below guide also implies that you plan on using 1 Google Analytics Custom Dimension per experiment. + +This guide also implies that you have also created the Custom Dimensions you plan on using in the Google Analytics interface. + +## Installation + +Contrary to analytics.js, the new Global Site Tag tracking code (gtag.js) requires to reference the custom dimensions prior to using them. + +Therefore, in order to use this integration you'll need to update the Global Site Tag and add the list of custom dimensions you want to use to store Optimizely experiment data. + +By default, the Global Site Tag looks like this: + +```javascript + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', 'GA_TRACKING_ID'); +``` + +where `GA_TRACKING_ID` is your Google Analytics tracking ID. + +We'll need to update the last line of code to look like this: + +```javascript +gtag('config', 'GA_TRACKING_ID', { + 'custom_map': {'dimension': 'DIMENSION_NAME'} +}); +``` + +where `GA_TRACKING_ID` is your Google Analytics tracking ID, `` is the custom dimension index and `DIMENSION_NAME` the name of the custom dimension. This information can be found by going into your Google Analytics dashboard->Admin->Property->Custom Definitions->Custom Dimensions. + +Note that you need to add each custom dimension you plan on using to store Optimizely data (including the ones that will be used for future experiments). +If there are multiple custom dimensions, the code will look like this: + +```javascript +gtag('config', 'GA_TRACKING_ID', { + 'custom_map': + {'dimension': 'DIMENSION_NAME'}, + {'dimension': 'DIMENSION_NAME_2'}, + {'dimension': 'DIMENSION_NAME_3'}, +}); +``` + +Next, go into Optimizely, head to the experiment that you want to integrate Google Site Tag with. + +Turn on the Google Site Tag Custom Analytics extension and in the experiment integration settings, enter the Custom Dimension name as you see it in the Google Analytics interface. + +Save and you should be good to go! \ No newline at end of file diff --git a/Integrations/Analytics/Google Site Tag/config.json b/Integrations/Analytics/Google Site Tag/config.json new file mode 100644 index 0000000..337e9d9 --- /dev/null +++ b/Integrations/Analytics/Google Site Tag/config.json @@ -0,0 +1,17 @@ +{ + "plugin_type": "analytics_integration", + "name": "Google Site Tag Integration", + "form_schema": [ + { + "default_value": "", + "field_type": "text", + "name": "dimension_name", + "label": "Custom Dimension Name", + "options": null + } + ], + "description": "", + "options": { + "track_layer_decision": "/*\n * Javascript written in this tab will run every time a user is\n * assigned to an experiment and variation, but before any experiment\n * code runs. This hook is useful for tracking which variations a\n * visitor has been assigned to. Click the help icon for more information.\n */\n\nvar decisionString = optimizely.get('state').getDecisionString({\n campaignId: campaignId,\n shouldCleanString: true,\n maxLength: 255\n});\n\nif(!!decisionString) {\n optimizely.get('utils').waitUntil(function() {\n return window.gtag !== undefined\n }).then(function() {\n var payload = {};\n payload[extension['dimension_name']] = decisionString;\n payload['event_category'] = decisionString;\n gtag('event', 'Optimizely Experiment', payload);\n }); \n}\n" + } + } \ No newline at end of file diff --git a/Integrations/Analytics/Google Site Tag/integration.js b/Integrations/Analytics/Google Site Tag/integration.js new file mode 100644 index 0000000..34cb9ca --- /dev/null +++ b/Integrations/Analytics/Google Site Tag/integration.js @@ -0,0 +1,23 @@ +/* + * Javascript written in this tab will run every time a user is + * assigned to an experiment and variation, but before any experiment + * code runs. This hook is useful for tracking which variations a + * visitor has been assigned to. Click the help icon for more information. + */ + +var decisionString = optimizely.get('state').getDecisionString({ + campaignId: campaignId, + shouldCleanString: true, + maxLength: 255 +}); + +if(!!decisionString) { + optimizely.get('utils').waitUntil(function() { + return window.gtag !== undefined + }).then(function() { + var payload = {}; + payload[extension['dimension_name']] = decisionString; + payload['event_category'] = decisionString; + gtag('event', 'Optimizely Experiment', payload); + }); +}