From 4ff29f6c89b0430372777ea14eebd72fbd8b24b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Tue, 15 Oct 2019 12:45:46 +0200 Subject: [PATCH 1/2] feat(): Introduce single integration page --- src/_layouts/integration.html | 74 +++++++++++++++++ src/_sass/components/_integration-header.scss | 19 +++++ src/_sass/pages/_integration.scss | 26 ++++++ src/_sass/segment.scss | 2 + .../catalog/optimizely-web/index.md | 82 ++++++++++--------- 5 files changed, 166 insertions(+), 37 deletions(-) create mode 100644 src/_layouts/integration.html create mode 100644 src/_sass/components/_integration-header.scss create mode 100644 src/_sass/pages/_integration.scss diff --git a/src/_layouts/integration.html b/src/_layouts/integration.html new file mode 100644 index 0000000000..ad8e35435f --- /dev/null +++ b/src/_layouts/integration.html @@ -0,0 +1,74 @@ +--- +layout: default +--- + +
+
+
+ {% include navbar/logo.html %} + + {% include menu/menu.html %} +
+ +
+
+
+ {% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %} +
+ + {% include navbar/navbar-mobile.html %} +
+ + +
+
+ {% include components/breadcrumbs.html %} + +
+ {%- if page.excerpt -%} +
+ +
+ {%- endif -%} +
+ {%- if page.title -%} +

+ {{ page.title }} +

+ {%- endif -%} + {%- if page.excerpt -%} +
+ {{ page.excerpt | markdownify }} +
+ {%- endif -%} +
+
+ +
+ {{ content }} +
+
+
+
+ +
+ {% include navbar/nav.html %} + +
+ {%- unless page.hide_toc -%} +
+ {% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %} +
+ {%- endunless -%} + + {% if page.feedback != false %} + {% include sidebar/feedback.html %} + {% endif %} +
+
+
+ +
+ {% include components/footer.html %} +
+
diff --git a/src/_sass/components/_integration-header.scss b/src/_sass/components/_integration-header.scss new file mode 100644 index 0000000000..2c8c7c682f --- /dev/null +++ b/src/_sass/components/_integration-header.scss @@ -0,0 +1,19 @@ +.integration-header { + @include breakpoint(large up) { + display: flex; + } + + &__icon { + float: left; + margin-right: 20px; + width: 141px; + height: 141px; + background-color: color(gray-light); + border-radius: 8px; + padding: 25px; + } + + &__content { + margin-top: 5px; + } +} diff --git a/src/_sass/pages/_integration.scss b/src/_sass/pages/_integration.scss new file mode 100644 index 0000000000..af0e5f381f --- /dev/null +++ b/src/_sass/pages/_integration.scss @@ -0,0 +1,26 @@ +.integration { + display: block; + + & > * + * { + margin-top: 33px; + } + + &__body { + margin-top: 70px; + + & > h2 { + margin-top: 70px; + position: relative; + + &::after { + height: 1px; + width: 100%; + position: absolute; + top: -35px; + left: 0; + background-color: rgba(color(secondary), 0.16); + content: ""; + } + } + } +} diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss index a9d78e70d0..063cc06c3d 100644 --- a/src/_sass/segment.scss +++ b/src/_sass/segment.scss @@ -83,6 +83,7 @@ @import "components/faq"; @import "components/avatar"; @import "components/related-list"; +@import "components/integration-header"; // Pages // ================================================= @@ -91,6 +92,7 @@ @import "pages/destinations"; @import "pages/home"; @import "pages/page-404"; +@import "pages/integration"; // Vendors // ================================================= diff --git a/src/connections/destinations/catalog/optimizely-web/index.md b/src/connections/destinations/catalog/optimizely-web/index.md index 3eb215161e..e95b9b8360 100644 --- a/src/connections/destinations/catalog/optimizely-web/index.md +++ b/src/connections/destinations/catalog/optimizely-web/index.md @@ -1,5 +1,7 @@ --- title: Optimizely Web +mark: https://cdn.filepicker.io/api/file/8nygQ8DuSbWK01VIjZE5 +excerpt: Segment makes it easy to send your data to [Optimizely Web](#) (and lots of other destinations). Once you've tracked your data through our open source [libraries](#) we'll translate and route your data to Optimizely Web in the format they understand. [Learn more](#) about how to use Optimizely Web with Segment. --- ## Getting Started @@ -37,18 +39,18 @@ Segment provides specific implementation details for each Optimizely product in ### Getting Started -1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*). -2. Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page. -3. In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration." -4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page. The snippet looks something like this: +{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*)' %} +{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page." %} +{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration."' %} +{% include components/list-steps.html number="4" content="In your Optimizely dashboard, copy the snippet provided at the bottom of the page. The snippet looks something like this:" %} - ```javascript + ```html ``` -5. Include the snippet immediately after the opening `` tag on every page where you’d like to include Optimizely’s JavaScript. -6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript. -7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`. +{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `` tag on every page where you’d like to include Optimizely’s JavaScript." %} +{% include components/list-steps.html number="6" content="Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript." %} +{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %} ### Track @@ -161,24 +163,26 @@ If you run multiple experiments during a user session, since `traits` are cached ## Optimizely Classic Android -**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.** +{% capture noteAndroid %} + Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic. +{% endcapture %} +{% include components/note.html content=noteAndroid %} For Segment’s Optimizely Full Stack Android destination, see Segment's [Optimizely Full Stack](./../optimizely-full-stack/index.md) documentation. ### Getting Started -1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*). -2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely. -3. Include the desired version of the Optimizely Classic Android SDK as a dependency in your Android app. -4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`. -5. Instantiate Segment’s global Analytics object with an Optimizely factory registered: +{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %} +{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely." %} +{% include components/list-steps.html number="3" content="Include the desired version of the Optimizely Classic Android SDK as a dependency in your Android app." %} +{% include components/list-steps.html number="4" content="Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`." %} +{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %} ```java analytics.use(OptimizelyIntegration.createFactory(context, /* your Optimizely projectId */)); ``` - Since Optimizely needs to be initialized as early as possible, you need to supply your Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` events to Optimizely methods. - -7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`. +{% include components/list-steps.html number="6" content="Since Optimizely needs to be initialized as early as possible, you need to supply your Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` events to Optimizely methods." %} +{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %} ### Track @@ -208,16 +212,19 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>Androi ## Optimizely Classic iOS -**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.** +{% capture noteIOS %} + Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic. +{% endcapture %} +{% include components/note.html content=noteIOS %} For Segment’s Optimizely Full Stack iOS destination, see Segment's [Optimizely Full Stack documentation](./../optimizelyx/index.md). ### Getting Started -1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*). -2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely. -3. Include the desired version of the Optimizely 1.x iOS SDK as a dependency in your iOS app. -4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`. -5. Instantiate Segment’s global Analytics object with an Optimizely factory registered: +{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %} +{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely." %} +{% include components/list-steps.html number="3" content="Include the desired version of the Optimizely 1.x iOS SDK as a dependency in your iOS app." %} +{% include components/list-steps.html number="4" content="Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`." %} +{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %} ```objc [config use:[SEGOptimizelyIntegrationFactory instanceWithToken: /* your Optimizely project id /* launchOptions:launchOptions]]; @@ -225,7 +232,8 @@ For Segment’s Optimizely Full Stack iOS destination, see Segment's [Optimizely Since Optimizely needs to be initialized as early as possible, you need to supply the Optimizely `projectId` when you initialize the factory registered with the analytics client. Once registered, Segment maps `track` and `identify` to Optimizely. -6. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`. +{% include components/list-steps.html number="6" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %} + ### Track @@ -259,13 +267,13 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>iOS SD ### Getting Started -1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*). -2. Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page. -3. In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration." -4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page. -5. Include the snippet immediately after the opening `` tag on every page where you’d like to include Optimizely’s JavaScript. -6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript. -7. Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`. +{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %} +{% include components/list-steps.html number="2" content="Go to your project’s home page in your Optimizely dashboard, then navigate to Settings -> Implementation and select the snippet version you’d like to include on your Web page." %} +{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration."' %} +{% include components/list-steps.html number="4" content="In your Optimizely dashboard, copy the snippet provided at the bottom of the page." %} +{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `` tag on every page where you’d like to include Optimizely’s JavaScript." %} +{% include components/list-steps.html number="6" content="Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript." %} +{% include components/list-steps.html number="7" content="Finally, remember to define any `metrics` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %} ### Track @@ -359,12 +367,12 @@ If you’re sending your experiments to Google Analytics in the form of `track` ### Getting Started -1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*). -2. Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`. -3. The instance must be named `optmizelyClientInstance`. -4. Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it. -5. Now, paste your Segment snippet below the Optimizely implementation on every page where you’d like to include Segment’s JavaScript. Or, if you’ve implemented Optimizely in a separate file, ensure Segment loads only after Optimizely has been initialized. -6. Finally, remember to define any `metrics` and `attributes` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`. +{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %} +{% include components/list-steps.html number="2" content="Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`." %} +{% include components/list-steps.html number="3" content="The instance must be named `optmizelyClientInstance`." %} +{% include components/list-steps.html number="4" content="Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it." %} +{% include components/list-steps.html number="5" content="Now, paste your Segment snippet below the Optimizely implementation on every page where you’d like to include Segment’s JavaScript. Or, if you’ve implemented Optimizely in a separate file, ensure Segment loads only after Optimizely has been initialized." %} +{% include components/list-steps.html number="46" content="Finally, remember to define any `metrics` and `attributes` in your Optimizely dashboard, and to associate `metrics` with the appropriate Optimizely Experiments. Segment maps `track` event names to Optimizely `eventName` - the `eventName` corresponds to an experiment `metric`." %} ### Track From 24eff5f8686e3f6fb2f9bca59456577a1aca9716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Tue, 15 Oct 2019 14:09:15 +0200 Subject: [PATCH 2/2] feat(): Add default layout for all integrations --- _config.yml | 1 + src/_layouts/integration.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 5686c5a5e0..81adda7a16 100644 --- a/_config.yml +++ b/_config.yml @@ -20,6 +20,7 @@ defaults: path: "connections/destinations" values: integration_type: destination + layout: integration - scope: path: "connections/sources/catalog" values: diff --git a/src/_layouts/integration.html b/src/_layouts/integration.html index ad8e35435f..008de2e673 100644 --- a/src/_layouts/integration.html +++ b/src/_layouts/integration.html @@ -25,7 +25,7 @@ {% include components/breadcrumbs.html %}
- {%- if page.excerpt -%} + {%- if page.mark -%}