Skip to content

Commit 87a9891

Browse files
bart-krakowskiimklau
bart-krakowski
authored and
imklau
committed
feat() Introduce single integration page (#121)
* feat(): Introduce single integration page * feat(): Add default layout for all integrations
1 parent 4b201c0 commit 87a9891

File tree

6 files changed

+167
-37
lines changed

6 files changed

+167
-37
lines changed

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ defaults:
2222
path: "connections/destinations"
2323
values:
2424
integration_type: destination
25+
layout: integration
2526
- scope:
2627
path: "connections/sources/catalog"
2728
values:

‎src/_layouts/integration.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="docs">
6+
<div class="stage">
7+
<div class="docs__aside stage__aside">
8+
{% include navbar/logo.html %}
9+
10+
{% include menu/menu.html %}
11+
</div>
12+
13+
<main class="docs__body stage__body">
14+
<div>
15+
<div class="search">
16+
{% include navbar/search.html placeholder="Search documentation, ex. protocolos..." %}
17+
</div>
18+
19+
{% include navbar/navbar-mobile.html %}
20+
</div>
21+
22+
23+
<div class="stage__content">
24+
<article class="integration page">
25+
{% include components/breadcrumbs.html %}
26+
27+
<div class="integration-header">
28+
{%- if page.mark -%}
29+
<div class="integration-header__icon">
30+
<img src="{{ page.mark }}" alt="" class="image">
31+
</div>
32+
{%- endif -%}
33+
<div class="flex__column">
34+
{%- if page.title -%}
35+
<h1 id="{{ page.title | downcase }}" class="page__heading">
36+
{{ page.title }}
37+
</h1>
38+
{%- endif -%}
39+
{%- if page.excerpt -%}
40+
<div class="integration-header__content">
41+
{{ page.excerpt | markdownify }}
42+
</div>
43+
{%- endif -%}
44+
</div>
45+
</div>
46+
47+
<div class="integration__body markdown">
48+
{{ content }}
49+
</div>
50+
</article>
51+
</div>
52+
</main>
53+
54+
<div class="docs__sidebar stage__sidebar">
55+
{% include navbar/nav.html %}
56+
57+
<div class="sidebar sidebar--sticky">
58+
{%- unless page.hide_toc -%}
59+
<div data-anchors-indicator data-active-class="menu-side__item--active">
60+
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
61+
</div>
62+
{%- endunless -%}
63+
64+
{% if page.feedback != false %}
65+
{% include sidebar/feedback.html %}
66+
{% endif %}
67+
</div>
68+
</div>
69+
</div>
70+
71+
<footer>
72+
{% include components/footer.html %}
73+
</footer>
74+
</div>

‎src/_sass/components/_integration-header.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.integration-header {
2+
@include breakpoint(large up) {
3+
display: flex;
4+
}
5+
6+
&__icon {
7+
float: left;
8+
margin-right: 20px;
9+
width: 141px;
10+
height: 141px;
11+
background-color: color(gray-light);
12+
border-radius: 8px;
13+
padding: 25px;
14+
}
15+
16+
&__content {
17+
margin-top: 5px;
18+
}
19+
}

‎src/_sass/pages/_integration.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.integration {
2+
display: block;
3+
4+
& > * + * {
5+
margin-top: 33px;
6+
}
7+
8+
&__body {
9+
margin-top: 70px;
10+
11+
& > h2 {
12+
margin-top: 70px;
13+
position: relative;
14+
15+
&::after {
16+
height: 1px;
17+
width: 100%;
18+
position: absolute;
19+
top: -35px;
20+
left: 0;
21+
background-color: rgba(color(secondary), 0.16);
22+
content: "";
23+
}
24+
}
25+
}
26+
}

‎src/_sass/segment.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
@import "components/faq";
8484
@import "components/avatar";
8585
@import "components/related-list";
86+
@import "components/integration-header";
8687
@import "components/code-example";
8788

8889
// Pages
@@ -92,6 +93,7 @@
9293
@import "pages/destinations";
9394
@import "pages/home";
9495
@import "pages/page-404";
96+
@import "pages/integration";
9597

9698
// Vendors
9799
// =================================================

‎src/connections/destinations/catalog/optimizely-web/index.md

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
22
title: Optimizely Web
3+
mark: https://cdn.filepicker.io/api/file/8nygQ8DuSbWK01VIjZE5
4+
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.
35
---
46
## Getting Started
57

@@ -37,18 +39,18 @@ Segment provides specific implementation details for each Optimizely product in
3739

3840
### Getting Started
3941

40-
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
41-
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.
42-
3. In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration."
43-
4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page. The snippet looks something like this:
42+
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*)' %}
43+
{% 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." %}
44+
{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use Both Optimizely X and Optimizely Classic" under "Snippet Configuration."' %}
45+
{% 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:" %}
4446

45-
```javascript
47+
```html
4648
<script src="//cdn.optimizely.com/js/#########.js"></script>
4749
```
4850

49-
5. Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript.
50-
6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript.
51-
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`.
51+
{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript." %}
52+
{% 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." %}
53+
{% 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`." %}
5254

5355
### Track
5456

@@ -161,24 +163,26 @@ If you run multiple experiments during a user session, since `traits` are cached
161163

162164
## Optimizely Classic Android
163165

164-
**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.**
166+
{% capture noteAndroid %}
167+
Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.
168+
{% endcapture %}
169+
{% include components/note.html content=noteAndroid %}
165170

166171
For Segment’s Optimizely Full Stack Android destination, see Segment's [Optimizely Full Stack](./../optimizely-full-stack/index.md) documentation.
167172

168173
### Getting Started
169-
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
170-
2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely.
171-
3. Include the desired version of the Optimizely Classic Android SDK as a dependency in your Android app.
172-
4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`.
173-
5. Instantiate Segment’s global Analytics object with an Optimizely factory registered:
174+
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
175+
{% 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." %}
176+
{% 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." %}
177+
{% 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`." %}
178+
{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %}
174179

175180
```java
176181
analytics.use(OptimizelyIntegration.createFactory(context, /* your Optimizely projectId */));
177182
```
178183

179-
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.
180-
181-
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`.
184+
{% 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." %}
185+
{% 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`." %}
182186

183187
### Track
184188

@@ -208,24 +212,28 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>Androi
208212

209213
## Optimizely Classic iOS
210214

211-
**NOTE: Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.**
215+
{% capture noteIOS %}
216+
Optimizely Mobile Classic has been officially deprecated as of September 30, 2018. You won't be able to start new experiments in Classic.
217+
{% endcapture %}
218+
{% include components/note.html content=noteIOS %}
212219

213220
For Segment’s Optimizely Full Stack iOS destination, see Segment's [Optimizely Full Stack documentation](./../optimizelyx/index.md).
214221

215222
### Getting Started
216-
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
217-
2. Go to your project’s home page in your Optimizely dashboard and retrieve your `projectId` - you’ll need this to instantiate Optimizely.
218-
3. Include the desired version of the Optimizely 1.x iOS SDK as a dependency in your iOS app.
219-
4. Instantiate Optimizely - you’ll use this instance to invoke methods from Optimizely’s decision API such as `activate` and `isFeatureEnabled`.
220-
5. Instantiate Segment’s global Analytics object with an Optimizely factory registered:
223+
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
224+
{% 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." %}
225+
{% 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." %}
226+
{% 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`." %}
227+
{% include components/list-steps.html number="5" content="Instantiate Segment’s global Analytics object with an Optimizely factory registered:" %}
221228

222229
```objc
223230
[config use:[SEGOptimizelyIntegrationFactory instanceWithToken: /* your Optimizely project id /* launchOptions:launchOptions]];
224231
```
225232
226233
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.
227234
228-
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`.
235+
{% 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`." %}
236+
229237
230238
### Track
231239
@@ -259,13 +267,13 @@ Upon an Optimizely experiment activation, Segment’s Optimizely Classic<>iOS SD
259267

260268
### Getting Started
261269

262-
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
263-
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.
264-
3. In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration."
265-
4. In your Optimizely dashboard, copy the snippet provided at the bottom of the page.
266-
5. Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript.
267-
6. Now, paste your Segment snippet below the Optimizely snippet on every page where you’d like to include Segment’s JavaScript.
268-
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`.
270+
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
271+
{% 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." %}
272+
{% include components/list-steps.html number="3" content='In your Optimizely dashboard, select "Use only Optimizely X" under "Snippet Configuration."' %}
273+
{% include components/list-steps.html number="4" content="In your Optimizely dashboard, copy the snippet provided at the bottom of the page." %}
274+
{% include components/list-steps.html number="5" content="Include the snippet immediately after the opening `<head>` tag on every page where you’d like to include Optimizely’s JavaScript." %}
275+
{% 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." %}
276+
{% 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`." %}
269277

270278
### Track
271279

@@ -359,12 +367,12 @@ If you’re sending your experiments to Google Analytics in the form of `track`
359367

360368
### Getting Started
361369

362-
1. In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).
363-
2. Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`.
364-
3. The instance must be named `optmizelyClientInstance`.
365-
4. Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it.
366-
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.
367-
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`.
370+
{% include components/list-steps.html number="1" content='In your Segment source dashboard, enable the "Optimizely Web" destination (*not the "Optimizely Full Stack" destination*).' %}
371+
{% include components/list-steps.html number="2" content="Require Optimizely’s `@optimizely/optimizely-sdk` on your site and create an `optimizelyClientInstance`." %}
372+
{% include components/list-steps.html number="3" content="The instance must be named `optmizelyClientInstance`." %}
373+
{% include components/list-steps.html number="4" content="Attach the `optimizelyClientInstance` to the `window` so Segment recognizes it." %}
374+
{% 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." %}
375+
{% 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`." %}
368376

369377
### Track
370378

0 commit comments

Comments
 (0)