Technical Marketing Guide

A travel guide for technical marketing – get inspired and start exploring yourself.

Chat

Hey , nice to meet you!

Here are all guides about

Edit the text of a website without going into developer mode

This one is a short tipp but one that I’ve used countless times over the last few years. Many times as “technical marketer” you’ll have to edit the copy on a website – either just to check if the text fits and looks well or to send somebody a screenshot of a change that you […]

Continue reading
Create Apple ARKit Files (USDZ) for iOS with Blender

In this guide I will show you how to create usdz files that can be displayed natively in Safari on iOS 12 and above. The usdz file format, that was developed by Pixar, can be used to create Quick Look Objects that can be displayed in 3D and AR (Augmented Reality) either in Apps or […]

Continue reading
Convert CSS 3D Rendering to an Image with Puppeteer

In this guide I want to share with you some powerful things you can do with CSS and show you an example use-case for Puppeteer by Google (a headless chrome api). CSS became pretty powerful in recent years when it comes to 3D visualisation. One application of that is turning a flat image into a […]

Continue reading
SVG Vector Emojis

I designed a set of vector emojis inspired by those from apple – you can use those in your Facebook Ads or Videos. They are completely free. The set includes: 35 Emojis PNG Versions SVG Versions Sketch File Before you download the set – It would mean a lot to me if you could take a […]

Continue reading
EU Cookie Consent for GDPR with Google Tag Manager

First of all: I’m not a lawyer, so use this approach at your own risk, I cannot and will not guarantee that his solution to comply with GDPR with the support of Google Tag Manager is valid. The EU e-Privacy Directive Law going into effect on the 25th of May in 2018 will force websites […]

Continue reading
Low-Cost Professional Facebook Live Studio Setup for iPhone

The image above shows you all the gear you can use with your iPhone to get professional results when broadcasting live on Facebook or another Platform (Youtube, Instagram). Two things are essential for a good live broadcast. 1) Good Audio and 2) Good Internet Connection. 1) The image quality might be important but the audio […]

Continue reading
Advanced Web Scraping

Advanced Web Scraping with Nokogiri and Ruby

Continue reading
Tutorial: How to setup Facebook Messenger Ads

Just recently Facebook started to offer a new destination for Facebook ads. Instead of sending the person to a website you can now also send the person right into the facebook messenger. In the image here, you see what happens when a person taps on this kind of app. To set it up, you’ll need […]

Continue reading
Tutorial: How to create a Facebook Messenger Chatbot

Getting started with a Facebook Messenger (or Telegram) Chatbot is now as easy as using a drag-and-drop interface – nothing is stopping you from getting started yourself. In my opinion the best tool out there to get started is Chatfuel – a great piece of software that is (as of the time of writing this guide) […]

Continue reading
Quickly compress images with Automator (Mac)

Although data-plans are becoming bigger and bigger the size of a webpage still matters – according to many sources the page load time drastically affects all your important KPIs (most importantly your conversion rate). One of the big reasons for larger websites are images. As our phones get better resolutions the images need to keep […]

Continue reading
MySQL Tutorial with Examples

In this MySQL tutorial we’ll look into creating databases, creating tables and some query examples. MySQL short for Structured Query Language is an open-source relational database management system (see Wikipedia) and is used in millions of companies as the main database. Applications / Companies that use the MySQL database include: WordPress, Drupal, Facebook, Twitter, Flickr, […]

Continue reading
Markdown – Text To HTML Conversion

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). Daring Fireball: Markdown This is how John Gruber, one of the inventors of markdown, explains the the tool as he calls it. It already sounds […]

Continue reading
Invest in Software (Mac Edition)

Most people out there have probably never bought any software for their Mac. If anything they might have gotten their hands on the Microsoft Office Suite and that’s it. We’re so used to free apps from Google, Facebook or any other web-service, so why should we pay for software? You’re Mac is a great machine, […]

Continue reading
A Better Campaign URL Builder for UTM Tracking Links

This is a free google spreadsheet based campaign url builder for utm tracking links to be used with Google Analytics. I’ve created this tool with years of experience working in marketing, giving it all the features our team needed when it came to tracking links. → Grab a copy of the tool What it offers […]

Continue reading
Installing Google Tag Manager in WordPress

For the basic Google Tag Manager setup you’ll just need to place the „container-snippet“ on every page of your website. A website is typically structured in a way that allows you to place the code in one file which results the code to be shown on every page of the website. In wordpress this file […]

Continue reading
Master Google Sheets

Google Sheets is the cloud-based alternative to Microsoft Excel. Although Excel might still be the choice for some business needs, I’d strongly advise everybody to know your way around Google Spreadsheets. It’s fast, free and pretty easy to use. We’re not going to talk about the basic stuff here (you should know the basic functions […]

Continue reading
Basic Web Scraping With Google Sheets

This article serves two purposes. 1) To show you that there are basically no limits to what can be done with Google Sheets. 2) To give you a glimpse into web scraping. The key takeaway for you should be that there is almost always a way of automating a task, just make sure not to […]

Continue reading
Getting Started with Google Tag Manager

Before we get into the details – let me explain a bit about the general terminology of the topic at hand. When you operate a website you’ll at some point have to connect another web-service to your website. You’ll might have to pass some data to get web-analytics up and running or transmit purchase information […]

Continue reading
WordPress Child-Themes

So you’ve just (bought and) installed a theme. After a while you will eventually run into a situation where you have to – or want to – change some code of the theme. A very common and basic change would be that you’ll want to activate Google Analytics (Free Web Analytics) on your site.

Continue reading
WordPress Plugins

WordPress is very customizable. At the core of the customization is the plugin-functionality. A developer can code an extra feature for wordpress and connect it to the system via a so called „plugin“. These plugins range from very simple to super complex. Here I’ll present to you my basic plugin setup that I recommend on […]

Continue reading
WordPress Setup & Your first theme

What I do first after installing wordpress: Finding a suitable theme Change the permalink structure Comments? Yes/No

Continue reading
Install WordPress

WordPress is the most popular Content Management System (CMS) that is the backbone for a huge part of the internet. The system is free and highly flexible. WordPress can be installed on your own platform (self-hosted, free) or be operated by wordpress.com (hosted, not free). A lot more common is the self-hosted variation but both […]

Continue reading
Connect to a server with FTP

FTP is a file transfer protocol thats used to get files from A to B. In a marketing sense a (secure) FTP-Server many times linkes two companies/services to transfer data.

Continue reading
Register a domain

Probably I don’t have to explain why a domain might be useful … Fun fact: At the time of writing there are just about 1.135.214.443 (1.14 billion!) websites/domains registered.

Continue reading

Thanks for getting in contact.

Edit the text of a website without going into developer mode

This one is a short tipp but one that I’ve used countless times over the last few years. Many times as “technical marketer” you’ll have to edit the copy on a website – either just to check if the text fits and looks well or to send somebody a screenshot of a change that you can’t make yourself.

Normally you would have to go into the “Web Inspector” find the element and change it there.

The old way

But there’s a much easier and quicker option. I’ve found this “bookmarklet” that let’s you just change any text on a website as if you were in a text document.

The way easier way

Change Text on Website

To install it just drag the following link in your browsers bookmark bar.

Edit Page

If it doesn’t work that way, create a new bookmark (e.g. for this site) and then change the address to the following code:

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

Create Apple ARKit Files (USDZ) for iOS with Blender

In this guide I will show you how to create usdz files that can be displayed natively in Safari on iOS 12 and above.

The usdz file format, that was developed by Pixar, can be used to create Quick Look Objects that can be displayed in 3D and AR (Augmented Reality) either in Apps or in Safari on iOS.

This is how an experience on iOS can look like.

How to create a usdz file

1) Create a 3D File

To create usdz file you’ll need a 3D file that you’ll convert to a usdz file. For a still object you can use a Wavefront (.obj) file. For an animation you’ll use an Alembic (.abc) file.

I used Blender to create that File but you can use any other 3D program that can output .obj files.

2) Use the usdz converter to covert 3D file

Update 2021: There is a new Python Tool called “USDPython” that you have to download from Apples Developer Area. Once you download and install the tool you’ll have to start it up by running the USD.command file in the applications folder. This starts a terminal window from where you can run the commands that are mentioned here.

You will need to install Xcode on your mac which has the so called usdz converter pre-installed. If you want to dig deeper and create usdz files in your application check out apples documentation

To get started you’ll need the following files:

  • .obj file of your 3D object that has all it’s UV Maps saved properly for the textures
  • A set of textures for each mesh that exists in the file. Each texture is optional and only has to provided if you need it to improve the look of the file.
    • color map (also called albedo)
    • normal map
    • metallic map
    • roughness map
    • ao map (ambient occlusion)
    • emissive map

The terminal command to convert your file looks like this:

usdzconvert input.obj output.usdz 
-m CubeMaterial
-normal cubenormal.png 
-diffuseColor cubecolor.png 
-roughness cuberoughness.png 
-metallic cubecmetal.png

If you had another Material in the 3D file just follow up starting with another -m and the name of the material.

If you want to debug the input file and get verbose output to look at the names of the materials in the obj file just add -v like so:

usdzconvert input.obj output.usdz -v

And here is a complete video walkthrough of the whole process. (The script has changed since this video was made so use the script above)

Tipps

A few tips for you so that you don’t make the same mistakes as I did.

  • Don’t compress your png textures with a tool like TinyPNG, it will mess up the alpha channel and won’t work correct.
  • If you have Photoshop you can use it to create normal maps (Filter -> 3D)

Convert CSS 3D Rendering to an Image with Puppeteer

In this guide I want to share with you some powerful things you can do with CSS and show you an example use-case for Puppeteer by Google (a headless chrome api).

CSS became pretty powerful in recent years when it comes to 3D visualisation. One application of that is turning a flat image into a 3D Object with CSS 3D transformations.

The example above works by splitting an image into 24 strips and using image transformation to rotate each strip accordingly. The 3D transformation is done on-device and is quite performance-intense for the device.

Ideally one could save that rendering as a image thumbnail and cache that image for future reference e.g. for use in an Email that is sent at a later point of time.

This is easily done by snapping a screenshot of that page on your device – but could that be done in a server environment?

It turns out, yes, there is a pretty elegant solution.

Enter Puppeteer by Google

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

One of the listed examples of Puppeteer (GitHub) is Generate screenshots and PDFs of pages.

Perfect. I fiddled around with the code a bit and got it running over at Try Puppeteer. The library even supports stuff like omitBackground to generate a PNG with transparency.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 300, height: 800});
await page.goto('http://technicalmarketing.guide/3d/?design=design3');
await page.screenshot({path:
'screenshot.png',omitBackground:true});
await browser.close();

There are plenty of other use cases you might find for Puppeteer, fore example:

  • Generate PDFs of invoices that you want to attach to an email.
  • Do speed tests of your website in a completely clean environment.
  • Automated UI Testing

You can find the code for the 3D CSS cylinder here.

SVG Vector Emojis

Free Vector SVG Emoji

I designed a set of vector emojis inspired by those from apple – you can use those in your Facebook Ads or Videos. They are completely free.

The set includes:

  • 35 Emojis
  • PNG Versions
  • SVG Versions
  • Sketch File

Before you download the set – It would mean a lot to me if you could take a second to upvote this item on ProductHunt. It’s a great community and helps spread the word about this site.

→ Download the Emoji-Set

EU Cookie Consent for GDPR with Google Tag Manager

First of all: I’m not a lawyer, so use this approach at your own risk, I cannot and will not guarantee that his solution to comply with GDPR with the support of Google Tag Manager is valid.

The EU e-Privacy Directive Law going into effect on the 25th of May in 2018 will force websites catering to european visitors to follow the Commission’s guidelines on privacy and data protection and inform users that cookies are not being used to gather information unnecessarily.

The ePrivacy directive – more specifically Article 5(3) – requires prior informed consent for storage or for access to information stored on a user’s terminal equipment. In other words, you must ask users if they agree to most cookies and similar technologies (e.g. web beacons, Flash cookies, etc.) before the site starts to use them.

Important Notice: This guide is not really meant to be followed step by step as it is a very custom solution. Instead take the information I provided and use pieces or just take it as inspiration. My solution is by far not the most elegant I’m sure but maybe there are bits and pieces that might be helpful to your approach of getting your site ready for GDPR.

Update 23.05.18:

New Approach: Strict Approach with Preference-Management

  • Consent on certain cookie categories only by clicking “accept”.
  • Categorisation of cookies in different categories.
  • Cookie-Preference Management.

I’ve updated my cookie consent with Google Tag Manager quite a bit. My new “solution” is a bit more strict and allows for categorisation of cookies.

If you want to use some of my code, here’s a little FAQ:

  • Adjust the “Cookie Base URL” Macro to match your URL otherwise the cookies won’t set correctly.
  • There are a couple “Example” Tags included to show you how your tags need to fired with this approach.
  • Be sure to update the “Cookie Bar Text” variable to adjust the text and links accordingly.
  • Adapt the “Cookie Settings Pageview” Trigger to match your cookie-settings page – this trigger and the Tag “Settings Seen Cookie” will save the settings when they are only “viewed”. This Tag would be optional – I just found it helped the user experience.

This is the markup for the “cookie settings” page:

You could just use that code within a page in wordpress and it should work.

<input id="consent_performance" type="checkbox" /><label for="consent_performance">Performance Cookies</label>

<input id="consent_targeting" type="checkbox" /><label for="consent_targeting">Targeting Cookies</label>

<button type="button" class="button" id="consent_save">Save Settings</button>

→ Download the GTM Recipe

Old Approach: How to implement a cookie consent solution with Google Tag Manager

With the solution outlined below I wanted to make sure these requirements of the GDPR are met.

  • The user is informed.
  • The page adheres to Privacy by Default – meaning that no personal data is transmitted just by visiting the site. In plain english: No Facebook Pixel is fired just from opening the site.
  • The user has the right to object to the data transmission.

What is happening once a visitor enters the site

  • When a user enters the site the Cookie Consent Cookie is read to check if consent was given before.
  • The Cookie Bar is shown because no consent was given yet.
  • No third-party cookies are placed yet.
  • The user gives consent by either scrolling the page or clicking on “ok” in the cookie bar.
  • This event triggers the consent_event
    • The consent itself is saved to a first-party cookie.
    • The marketing-pixels (e.g. Facebook or Google Analytics) are triggered.

If the consent was given before

  • The Cookie Consent Cookie is set to true from a prior user consent (e.g. by scrolling or clicking “ok”)
  • The Cookie Bar is hidden because consent was already given.
  • The consent_event is immediately called.
    • The marketing-pixels (e.g. Facebook or Google Analytics) are triggered.

These Tags / Triggers are contained

  • Cookie Bar This Tag contains a complete cookie consent bar informing about the use of cookies. Once the user taps “ok” the cookie bar is hidden and a consent_event is pushed to the DataLayer.
    • There is a part in the code that reads innerHTML, that you have to adjust to match your sites privacy policy URL and personal choice of words.
  • Cookie Scroll Consent This Tag contains a script that checks for a scroll event. If the user scrolls the website:
    • A first party cookie is written to save the users consent.
    • The consent_event is pushed to the DataLayer.
  • Cookie Consent Global Settings is a Custom HTML Tag that controls a button in the privacy policy for the the user to object to the use of “marketing-cookies”.
    • To make it work you’d need to add this code to your privacy-policy or another part of your site where it makes sense <button id="disablecookies" class="button">Marketing-Cookies deaktivieren</button>* The Cookie Consent Cookie is a variable that stores the value of the first party cookie called cookie_consent
  • Consent Event is a Trigger that is called when the consent_event is being called by other Tags. It will in turn fire all marketing tags like Facebook or Analytics.
  • Cookie Consent True is a Trigger that fires if the consent_cookie cookie is set to true. It’s used to immediately fire the marketing tags if consent was given prior.
  • Set Cookie Consent is a Tag that creates the first party cookie to save the users consent. It is triggered by the Consent Event.
  • Cookie Consent DataLayer Event is a Tag that pushes the consent_event into the DataLayer. It is triggered by the Trigger “Cookie Consent True”.

Download the whole mess of triggers / tags / variables as one Google Tag Manager Recipe. Be sure to choose merge, don’t overwrite your data. You might even want to import the stuff into a new workspace.

→ Download the GTM Recipe

Low-Cost Professional Facebook Live Studio Setup for iPhone

The image above shows you all the gear you can use with your iPhone to get professional results when broadcasting live on Facebook or another Platform (Youtube, Instagram).

Two things are essential for a good live broadcast. 1) Good Audio and 2) Good Internet Connection.

1) The image quality might be important but the audio quality is just as important, if not more important. Especially if your not doing a “selfie-broadcast” and your subjects are a bit further away from the iPhone, the audio gets worse quickly.

2) A good internet connection is essential for a successful live broadcast. This setup tip applies to a broadcast that is more “studio-like” and not on the go. Even if you have wifi when broadcasting, it could drop out in the middle of the stream. To get around this, this setup will show you how to connect your iPhone to a stable ethernet internet connection.

This is what you’ll need

1) Lightning to USB Camera Adapter

Use the Lightning to USB Camera Adapter from Apple to connect the USB Hub (4) to your iPhone.

2) Apple USB Ethernet Adapter and 3) Ethernet Cable

Connect the Apple USB Ethernet Adapter to one of the ports of the USB Hub (4) and use it to connect an ethernet cable to your router for ethernet internet access.

4) USB Hub with external power source

Be sure to get a USB Hub that has an external power source, otherwise this setup won’t work.

5) USB Microphone

You’ll need a microphone that has a USB A cable, so that you’re able to connect it to the USB Hub (4).

And this is how you connect the whole setup

Advanced Web Scraping

In one of my previous posts I shared with you how to do basic web scraping with a combination of google sheets, the importxml() formula and xpath.

As soon as you’re project will become a bit bigger and you start to use more and more importxml() queries in your sheet you eventually will be capped by googles limit on the formula. The content just won’t load anymore.

Enter Nokogiri

Luckily there are plenty of other options for web scraping and you’ll be able to reuse your knowledge of xpath. Nokogiri is a so called ruby “gem” that you can run in terminal.

An example of what can be done with Nokogiri & Ruby

  • Scrape multiple elements of an URL as columns in a CSV
  • Scrape multiple (similar) URLs at once
  • Save the whole dataset to one CSV

An image tells a thousand words

The scraper in action

Pretty satisfying to watch this script doing it’s job.

Not sharing the code

Unfortunately scraping a website is an extremely “grey” area of the law – see this great writeup on the topic. That’s why I won’t share the code here. Think carefully about the consequences of your actions and ask the the content owner for permission before you do anything.

Why writing the post without an exact guide?

Scraping is a great thing to have in your toolbelt as technical marketing especially as you probably will find yourself in a situation where you’ll want to scrape your own content for one or another reason. Without knowing (and searching for) other options you’ll never question and improve your own approach.

How do you get started?

Check out this awesome tutorial, it’s very detailed and allowed me to finish my project.

Tutorial: How to setup Facebook Messenger Ads

Just recently Facebook started to offer a new destination for Facebook ads. Instead of sending the person to a website you can now also send the person right into the facebook messenger. In the image here, you see what happens when a person taps on this kind of app. To set it up, you’ll need a Facebook Page and a Chatfuel Account.

To see how the whole process is set up, just follow the video shown below. It’s really quite easy.

How to set up Facebook Messenger Content JSON for Chatfuel

In the video I mention a spreadsheet to create some of the JSON code – this spreadsheet can be found here:

Open FB Messenger Ads JSON Builder for Chatfuel

Tutorial: How to create a Facebook Messenger Chatbot

Getting started with a Facebook Messenger (or Telegram) Chatbot is now as easy as using a drag-and-drop interface – nothing is stopping you from getting started yourself.

In my opinion the best tool out there to get started is Chatfuel – a great piece of software that is (as of the time of writing this guide) completely free to use.

How to get started – What you need

1) A Facebook Page

Bots only integrate into Chats with Pages – so no, you can’t configure a Messenger Bot to keep your friends busy that try to reach you)

2) A Chatfuel account

You could also use Botsify or OnSequel but I haven’t tried either of those.

3) An idea

You sure can just experiment a bit but you probably already have an idea what you want to do with your bot.

Getting started

Instead of showing you how to use Chatfuel you should really jump in and figure out their interface yourself. It’s not complicated and they have great example bots that you can look at.

Implementing the messenger bot into WordPress

Almost more important as the bot itself is where you will grow your “audience” for your bot. As for me I decided that the bot would be a great way for people to contact me if they wanted to suggest a new topic for this website.

Facebook offers a few plugins that are specifically designed to be used to grow your messenger bot audience.

I decided to use the “Send to Messenger” Plugin and implement it’s code through a Custom WordPress Shortcode.

What does the bot actually do?

In the data-ref part of the code below a parameter can be passed to chatfuel. My bot accepts this parameter and sends the user to a specific conversation – in my case a custom greeting related to the communication on the website.

This is the code that I’m using in my functions.php to provide a custom shortcode. Whenever I write the defined shortcode (chatbot) in my wordpress posts content, a box with the “Send to message” button get’s rendered.

function fb_chatbot_shortcode() {
return '
<div id="chatbot_section">
<h3 style="margin-top:30px;color:#1787fb">Like these articles? – Suggest a topic</h3>
<p>If you have a suggestion for another guide or feedback to the guide you\'re reading, let me know! Just drop me a line using facebook messenger!</p>

<!-- Send to Messenger Button -->
<script> window.fbAsyncInit = function() { FB.init({ appId: "XXXXXXXXXXXXXXXX", xfbml: true, version: "v2.6" }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, \'script\', \'facebook-jssdk\')); </script> <div class="fb-send-to-messenger" messenger_app_id="XXXXXXXXXXXXXXXX" page_id="XXXXXXXXXXXXXXXX" data-ref="XXXXXXXXXXXXXXXX" color="blue" size="large"> </div>
<!-- Send to Messenger Button End -->

</div>
';
}
add_shortcode('chatbot', 'fb_chatbot_shortcode'); 

Obviously the whole messenger button code has to be replaced with your own code – that you find in the “Grow” Tab of your Chatfuel Account.

Below this last sentence you should see the result in action, go ahead, try it.

Like these articles? – Suggest a topic

If you have a suggestion for another guide or feedback to the guide you're reading, let me know! Just drop me a line using facebook messenger!

Quickly compress images with Automator (Mac)

Although data-plans are becoming bigger and bigger the size of a webpage still matters – according to many sources the page load time drastically affects all your important KPIs (most importantly your conversion rate).

One of the big reasons for larger websites are images. As our phones get better resolutions the images need to keep up and their size increases quite a bit.

But there is one really easy thing that you can do – and most people forget. You can compress images with minimal effects on the quality

There is a great service called TinyPNG that does exactly that: “PNG and JPEG compression with a perfect balance in quality and file size”

The technical marketers solution: Automate the process!

If you’re dealing with images on a regular bases you don’t want to have to open a web service every time you want to compress an image. How can this be done? I made a short video for you to follow along, the steps are explained below:

Instructions:

  • Fire up Automator (CMD + SPACE, “automator”, ENTER)
  • File > New, Select “Service”.
  • In the search field search for “run shell script”, drag the item to the right area.
  • Setup like this:
    • “Service receives selected” = “image files”
    • “in” = “finder”
    • “Shell” = “/bin/bash/”
    • “Pass input” = “as arguments”
  • Paste the following code into the text field below (delete the example code before)
for f in "$@"
do

   echo $f | while IFS= read file
   do
filename=$(basename $file)
ext=$(echo ${filename##*.} | tr "[:upper:]" "[:lower:]")
if [ -f $file ]
then
   if ( [ $ext == "png" ] || [ $ext == "jpg" ] || [ $ext == "jpeg" ] )
then
JSON=curl -i --user api:APIKEY --data-binary @$file https://api.tinypng.com/shrink 2>/dev/null  
URL=${JSON/*url\":\"/}
URL=${URL/\"*/}

curl $URL>${file} 2>/dev/null
fi
fi
done

done

afplay /System/Library/Sounds/Submarine.aiff
  • Request a API Key from TinyPNG
  • Click the Link in the Email TinyPNG sends you.
  • Copy the API Key and replace it in the code fragment where it states APIKEY.
  • File > Save!
  • Name the service how you want it to show up in the context menu. (Example: Compress Images).
  • Done! Right click on an image file in the finder an hit “Compress Images” to let the magic happen!

Disadvantage: You’re limited to 500 files per month, although I’ve found this to be quite a lot.

MySQL Tutorial with Examples

In this MySQL tutorial we’ll look into creating databases, creating tables and some query examples.

MySQL short for Structured Query Language is an open-source relational database management system (see Wikipedia) and is used in millions of companies as the main database.

Applications / Companies that use the MySQL database include: WordPress, Drupal, Facebook, Twitter, Flickr, and YouTube.

It is very likely that the company that you work for or started yourself uses MySQL for some use case.

What would I do with my knowledge?

Most marketers use their knowledge of MySQL to do some kind of data-analysis. If you don’t want to be dependent on an IT-guy for every bit of data-analysis of your application – you start teaching yourself MySQL. The alternative would be to grab the data (which is really just table data like you’d find in excel) and copy it to excel and do your analysis there.

Why isn’t copying to Excel an option?

One of the biggest reasons is, that you can work with live data. You don’t have to copy a snapshot of the data – you’ll work right there live on your database.

You’ll still export the result of your query (more on that later) to your data analysis software later but with mysql you can join data from multiple tables beforehand which saves you a ton of time and hundreds of VLOOKUPS or INDEX-MATCHES in your excel files.

Start with the most important part: The Test-Environment

In my opinion the most important step of learning how to work with MySQL is the test-environment and some test-date.

You’ll do thousands of iterations of selects and it’s fine that most of them fail as your software will tell you where you failed and you can improve on that.

Software vs. Web Services

Although there are some web services like sqlfiddle.com where you can try some selects but the performance is really slow and getting a big dataset in there is not very practical.

Recreating a real scenario

My approach is to recreate a real case as close as possible. Normally we’d connect to a web-server with some databases with a local software.

The mysql software

I chose Sequel Pro to do my selects but you could go with any other software out there.

The database / server

The only real database that I could connect to would be my running wordpress installation and its backend database – but I don’t want to mess with the live date.

So I use MAMP to set up a locally running webserver which comes with a MySQL server.

MySQL Tutorial – Install the Software to connect to a database

1) Install Sequel Pro
2) Install MAMP
3) Start the Server using MAMP
4) Connect to the server using Sequel Pro

1) and 2) and even 3) are pretty straightforward, you should be able to do that without any help. If something fails, just google the error – there is loads of help on those topics.

Talking about 4) This is the connection data that you have to enter into Sequel Pro to connect.

(You find the port number in MAMP -> Preferences -> Ports; but the standard port is 8889 so you can try my settings first. The PW is “root” as well)

Now you should be greeted with an empty window of Sequel Pro

Creating the database schema

Now that we have successfully connected to a sequel server we’re ready for databases & tables and some data. The process of creating the database and tables is called “creating a database schema”. I’ve created a google sheet with some sample data that I want to get into my database, if you want to follow along.

Not interested in how to create databases & tables? Just want to get to the sample data? Scroll down to “Shortcut – Just give me the sample data”.

Add a database

To get started we create an empty database by selecting that option form the dropdown in the top left corner.

Create a table

You now have an empty database without any tables in it. Head over into Sequel Pro and click the small (+) in the left lower corner to create a table.

Then add all the columns of the data that you want to import and also the data types.

Data Types?

There are quite a lot of data types – these can be thought of kind of like cell types in excel. You find a https://www.w3schools.com/sql/sql_datatypes.asp.

Common ones are INT, VARCHAR, TEXT or DECIMAL.

The whole process could have also be done with a mysql command like so:

CREATE TABLE orders (
order_id int default 0,
total_price decimal(10,2),
cust_id int,
PRIMARY KEY (order_id)
);

If that confuses you, just use the software for now as shown in the gif above.

Importing the data

Now that the database scheme is ready – we’re ready to import some data into it.

Import from a CSV File

A CSV-File (Comma Separated Values) is a very common file-format to transfer database-data from one place to another. (In this case from google sheets to my database)

I’ve exported the orders sheet from my google spreadsheet as csv (File -> Download as -> .csv) to import it into my Database.

To do so we need a run mysql command. Copy the command into the “Query” tab of Sequel Pro and hit CMD + R to execute it.

LOAD DATA LOCAL INFILE '/Users/Daniel/Downloads/orders.csv' INTO TABLE orders
FIELDS TERMINATED BY ',' 
ENCLOSED BY '"' 
LINES TERMINATED BY '\r\n'
IGNORE 1 LINES;

If everything worked the data is now in your table. Check the “Content” tab of Sequel Pro and it should now look like this:

Repeat the steps for the “customers” sheet from the sample google spreadsheet. Just adapt the commands / data types.

Shortcut – Just give me the sample data

If you’re not interested in the whole process of creating databases and tables and importing data just use my sample database. Download it, double click it and it should open in Sequel Pro and ask you if you want to import the data.

→ Download the Sample Database

Like these articles? – Suggest a topic

If you have a suggestion for another guide or feedback to the guide you're reading, let me know! Just drop me a line using facebook messenger!

Finally some examples with the example data

I’m going to show you a few examples – that you should be able to recreate. After you lost your fear of getting started head to one of the resources provided at the end of the guide to get in-depth knowledge of MySQL.

Select All

select * from orders;

This is as simple as it gets:

select

As long as we’re doing data analysis and not altering table date your query almost always starts with “select”.

*

The added asterisk basically just says “everything” – so we’ve just expanded our “select …” to “select all”

from orders

Answers the question what table we’re selecting from.

Execute by hitting CMD + R and you should end up with this result:

Select the sum of money spent per customer

SELECT cust_id,
   sum(total_price)
FROM orders
GROUP BY cust_id
ORDER BY sum(total_price) DESC;

After the select keyword we add the two columns that we want to see. First cust_id and then the of the values in total_price.

We also add a GROUP BY cust_id to let the server know that we’re interested in one row per customer.

The ORDER BY sum(total_price) DESC just reorders the values.

Revenue per Customer-Country

We have two tables so we actually can and want to join those tables. We have a common identifier (cust_id) which we’re going to use here. You can only join two tables if you have some (preferably unique) identifier in both tables.

SELECT Country,
   sum(total_price)
FROM orders,
 customers
WHERE orders.cust_id = customers.cust_id
GROUP BY Country
ORDER BY sum(total_price) DESC;

In this MySQL tutorial for beginners I cant’t go into detail describing this one as it get’s a bit complex. But head over to the resources provided below and start experimenting – you’ll quickly get the hang of it.

Where to become an expert

I can’t teach you the how to become a mysql expert – there are way better resources out there. But you now have a test environment and even some test data, which in my opinion is the most important part as you now can test your knowledge anytime and expand your datasets to fit your personal use-cases.

Where to learn MySQL – MySQL Tutorials to become an Expert

1) Codecademy – Check out this course
2) Udemy – There are many courses

Markdown – Text To HTML Conversion

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Daring Fireball: Markdown

This is how John Gruber, one of the inventors of markdown, explains the the tool as he calls it. It already sounds more complicated than it is. I suggest just to jump in. In this post I show you how to get started with Markdown (Wiki)

These are a few lines written in markdown syntax:

#First Headline (H1)

##Second Headline (H2)

This is a really short sentence with some **bold text**, some *italics* and a link to an [Example-Page](http://www.examplepage.com)

* a bullet
* another bullet

> This is a quote

1. Numbered Item
2. Another Numbered Item

![Example Image](http://lorempixel.com/g/300/100/technics/1/image)

A markdown enabled App will turn these lines into this:

<h1>First Headline (H1)</h1>
<h2>Second Headline (H2)</h2>
This is a really short sentence with some <strong>bold text</strong>, some <em>italics</em> and a link to an <a href="http://www.examplepage.com">Example-Page</a>
<ul>
    <li>a bullet</li>
    <li>another bullet</li>
</ul>
<blockquote>This is a quote</blockquote>
<ol>
    <li>Numbered Item</li>
    <li>Another Numbered Item</li>
</ol>
<img src="http://lorempixel.com/g/300/100/technics/1/image" alt="Example Image" />

So what happened here?

  • The Markdown App turns the markdown formatted text into valid html.
  • This HTML code can be pasted wherever you need the text (Mail, WordPress, your Website …)
  • You can also copy the formatted text for use in Pages or Word.

Why do I need this?

  • You’ll be able to write formatted text in every text-app, even on your phone without the hassle of a complicated interface.
  • You’ll be able to write simple HTML-Code without ever learning how to code.
  • You can use the HTML-Code for the web (your blog and website)  You don’t have to worry about who opens the file. After all, its just plain-text.
  • You can use themes to style your text with the click of a button. (You’ll need an app like Marked for that.

Ok, I’m convinced, where do I start?

  • Check out this Markdown Cheat Sheet. For starters you’ll do fine with my list of examples above as well.
  • Get a markdown app for desktop and mobile.
  • I highly recommend Ulysses as it has clients for the iPhone, iPad and Mac. It syncs over iCloud and Dropbox and has a really nice clean interface.
  • Don’t want to spend money right away? Go with Mou, it doesn’t have the different apps and sync but on Mac it does a really good job!

Where is Markdown Syntax supported

Once you start looking for it you’ll find markdown support in many, many places.

Further reading (for the real markdown-fan-boys)

Editorial – The ultimate Markdown app for iPad

Editorial is, simply put, the best writing app on the iPad. I won’t describe it at length here because Federico Viticcis Editorial Review on Macstories already does a perfect job there. So perfect that he turned it into a book called Writing On The iPad: Text Automation with Editorial

Markdown Presentations

I havent tried this one but it sure looks really promising. Deckset turns your markdown notes into beautiful presentations.

Invest in Software (Mac Edition)

Most people out there have probably never bought any software for their Mac. If anything they might have gotten their hands on the Microsoft Office Suite and that’s it. We’re so used to free apps from Google, Facebook or any other web-service, so why should we pay for software?

You’re Mac is a great machine, no doubt about it, and a lot of software comes with it so you can get along pretty well. But isn’t it actually a great thing that you can customize your Mac to supercharge your productivity and skills.

The following list is my personal collection of tools / software that I put on my Mac immediately after a fresh install. The list is ordered by importance to me; without the first items I basically can’t work properly.

1Password – Password Manager

Download on the App Store

If you’ve survived till now without a password manager, two things are possible: Either you are a genius at remembering crazy long passwords which differ for each and every service you use – or you don’t care about your data/privacy at all.

Please do care about your data on the web – the threat is real. If you wan’t to check if one of your passwords was compromised in a data breach check this service – if you don’t feel comfortable entering your Email just take a look at their list of reported breaches. Have you used Dropbox for example?

How does 1Password help? They do a very good job explaining that themselves, just head over there and let them convince you.

Alfred – Productivity App

Download from Alfred.com

Alfred is a productivity tool that most noticeably replaces the Mac spotlight bar (the hovering search bar you can invoke by CMD + SPACE). I won’t describe all the features here as there are almost endless.

My most used feature by Alfred is the “Clipboard History” which is one of the pro features and becomes available once you buy the so called “powerpack”.

The feature provides you with an ever updating list of all the text snippets and even images you have copied into the macs built-in clipboard in the last 24h.

This is what the feature looks like in action:

Really try this feature – it will save you a ton of time!

Ulysses – Writing App

Download on the App Store

Ulysses is my most favourite text editor based on markdown. It’s also available on iOS, syncs across the devices – has export options directly into WordPress & Medium and has become totally indispensably for me.

Looking for a cheaper alternative? Try Byword

Coda – Text Editor

Download from Panic

If you ever come across html/css files that you quickly want or even do some serious coding you might look for a lightweight but powerful text editor. My choice always has been Coda by the great developers of Panic.

Looking for a free alternative? Try Atom

Fantastical – Calendar App

Download on the App Store

Fantastical is a great calendar app – I use it mostly to quickly lookup the calendar from the status bar. Another great feature is the possibility of entering your appointments by natural language input. (Also available on iOS)

Next Meeting – Productivity App

Download on the App Store

Displays the title of your next upcoming meeting and the time remaining in the macs menu bar.

Magnet – Productivity App

Download on the App Store

Magnet is a really simple window management tool. Just drag your window to the top of the screen and it will resize to full size. Drag the window to the left side of the screen and it will resize to exactly half of the available space on the screen. It’s really cheap – just try it out!

Bartender – Productivity App

Get it here

This is what my mac’s menu bar would look like without Bartender:

This is what it looks like when Bartender is activated:

Basically the app cleans up the menu bar on your mac.

Amphetamine – Productivity App

Download on the App Store

Your Mac goes to sleep after a few minutes of not interacting with it. Sometimes this behaviour is a bit annoying – let’s say when you sit in a meeting and aren’t doing anything with the mac for a while but still want to get back to work without having to enter your password. That’s where Amphetamine comes in. Just click the little guy in the mac menu bar, select a time span and your all set. After the time has passed your mac will go back to your normal “sleeping schedule”.

Pixelmator or Affinity Photo – Photo Editing

Pixelmator – Download on the App Store

Affinity Photo – Download on the App Store

Both applications are great alternatives for the industry standard Photoshop. They are way cheaper but provide a ton of features – so if you are not a professional graphic designer each of those options work great!

LiceCap – Productivity App

Download here

LiceCap is one of my new favourites. It allows you to quickly record screencasts that are saved as gifs. I used this little gem to produce the gif you see above where I write about the Alfred App.

Tripmode – Productivity App

Get it here

Tripmode is a really nice piece of software, if you ever use your internet hotspot feature on your phone.

The problem: Your mac thinks it’s connected to a normal wifi and will allow all apps to connect to the internet. If e.g. a backup service is running your mobile data plan is going to be depleted very quickly.

The solution: Tripmode, it will automatically turn on once you’re connected through your mobile phone and only allow selected apps (that you can customise) to use the internet. This will prevent background services to use up all your precious mobile data.

A Better Campaign URL Builder for UTM Tracking Links

This is a free google spreadsheet based campaign url builder for utm tracking links to be used with Google Analytics. I’ve created this tool with years of experience working in marketing, giving it all the features our team needed when it came to tracking links.

→ Grab a copy of the tool

What it offers

  • Enforced Naming Convention
  • Strict Hierarchy – a hierarchy from top channel to more specific information
  • Campaign Name that is stringed together out of different hierarchy levels (to get almost all information right out of the campaign-identifier).
  • Team transparency
  • History for later reference
  • Options to include dynamic variables (e.g. dates)
  • The possibility to include data that isn’t saved to analytics but rather stays in the sheet for later reference (e.g. who created the link?)

How to use the tool

  1. Get a google account or login using your existing account.
  2. Open the google sheet
  3. Make a copy of it (File -> Make a copy)
  4. Rename the file to your liking
  5. Tap one of the buttons (e.g. “Get user”)
  6. Give the necessary permissions to the script (If you do find that shady, you could copy all the code in the script from the end of the article)
  7. Start using it

Setup your tracking tree

The provided google sheet has a base-setup included that fits an online marketing case. It can easily be expanded and altered. Here’s a short explanation of the top level channels I use.

  • SMM Social Media Marketing
  • SEA Search Engine Advertising
  • EXM External Marketing – Paid Marketing provided by external partners, e.g. a paid blog advertorial or an advert in a magazine.
  • DIS Display Advertising – Display Advertising e.g. through banner ads.
  • CRM Customer Relationship Marketing – All efforts to keep your retention low, e.g. sending out triggered emails.
  • AFF Affiliate Marketing
  • REF Referral Unpaid Traffic from external sources e.g. Platforms like Reddit.

Think of all your Main Traffic sources as a Tree with lot’s of branches. One set of main branches is listed above, this could vary for your business. Starting from each main branch are smaller branches – e.g. sub-channels. E.g. for Social Media Marketing there are different Social Media Platforms that you could use e.g. Facebook, Twitter, Pinterest …

Build your own tracking tree and alter the excel sheet to your special set of main traffic sources.

If you are happy with the tracking options I supplied you could probably get started right away. If not, see the FAQ.

What is a UTM Tracking Link for Google Analytics

By adding utm campaign parameters to the URLs you can tag all visitors that enter your site via this URL. The information in the tracking tags ends up in Google Analytics and makes it a lot easier to measure the profitability of each of your main traffic sources. Example:  If you have two link-posts on facebook without utm parameters attached to each URL you won’t be able to see which of your posts was more successful within Google Analytics. Google Analytics would only “see” that there is a bunch of traffic from facebook but not those two posts you posted.

An example of a complete tracking link looks like this:

http://technicalmarketing.guide/?utm_source=ref&utm_medium=reddit&utm_campaign=ref_reddit_utmsheet_2017081&utm_term=text-post&utm_content=none

There are 5 parameters you can add to your URLs:

  • utm_source This is the first level of your utm tracking links. Use it to specify the top level channel of the campaign. (e.g. SMM for Social Media Marketing)
  • utm_medium This is the second level of your tracking parameters. Use it to specify specify a sub-channel of your first level channel (e.g. Facebook in the case you had Social Media Marketing as first level channel)
  • utm_campaign This is your campaign parameter – It should be unique and show as much information as possible about the campaign. It makes sense to combine source, medium and even a date with a free input campaign identifier.
  • utm_term This is the fourth level of your tracking link, it is optional. Use it to specify the kind of advertisement you used in this campaign (e.g. Link-Post in the Facebook-Example)
  • utm_content The last parameter, also optional. Leave it empty if you don’t need it or use it to split your campaign e.g. for an A/B-Test or add another information that didn’t fit the definition of the other parameters.

FAQ

  • Editing the options
 If you want to change the options you’ll have to adjust the “tracking tree” in the according tab of the sheet. Just be sure to provide the options exactly like I did in my example – you’ll see quickly if it works or not.
  • Adding more input fields
 First of all add all the fields you want to add and “design” the sheet to your liking. After that the button “Save to Database” will probably fail. Head over to Tools > Script Editor and correct the script. It should be pretty self-explanatory – if not, ask a friend who knows a bit of coding.
  • Some characters get deleted/changed in the tracking link
 Yes, that’s totally on purpose. I just don’t want some characters to enter my analytics data. You can change those unwanted characters in the settings tab.
  • I don’t like the time format in the URL 
 Just head over to the settings tab and change it according to the formatting options of the help link provided.
  • I don’t like the campaign identifier
 This is also adjustable in the settings tab. It might take a while until you figure everything out but you can totally configure the identifier to your liking
  • What is save_values and why does it ask for permission to edit my sheets?
 In order to be able to save the data to the database tab there is a little script at work to make that possible. Just head over to Tools > Script Editor to check it out. There is no shady stuff going on – nobody other than you sees your data.


The Code

If you don’t trust the script that I wrote just copy this code to your script editor within google sheets. No shady things going on here.

function save_values() {

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  // ss is now the spreadsheet the script is associated with
  var sheet = ss.getSheets()[0]; // sheets are counted starting from 0
  // sheet is the first worksheet in the spreadsheet

  // define all the values you want to save to the database
  var time_start = sheet.getRange("D29").getValue();
  var creator = sheet.getRange("D30").getValue();
  var website_url = sheet.getRange("D31").getValue();
  var utm_source = sheet.getRange("D24").getValue(); 
  var utm_medium = sheet.getRange("D25").getValue();
  var utm_campaign = sheet.getRange("D26").getValue();
  var utm_term = sheet.getRange("D27").getValue();
  var utm_content = sheet.getRange("D28").getValue();

  var d = new Date();
  var timeStamp = d.getTime();
  timeStamp = timeStamp/86400000 + 25569

  // build your array – all fields from above should be listed here
  var values = [
  [ timeStamp, utm_source, utm_medium, utm_campaign, utm_term, utm_content, time_start, creator, website_url ]
  ];

  var sheet = SpreadsheetApp.getActiveSpreadsheet();

  // if you rename your database sheet, change the name here accordingly
  SpreadsheetApp.setActiveSheet(sheet.getSheetByName('Database'));

  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var values_2 = range.getValues();
  var row = 0;
  for (var row=0; row<values_2.length; row++) {
if (!values_2[row].join("")) break;
  }

  // if you add more values above be sure to expand the reference here as well. The column count has to match the count of different values above.
  var cell = sheet.getRange("A1:I1");
  var range = cell.offset(row, 0);

  range.setValues(values);
}

function getuser() {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getActiveSheet()
var email = Session.getActiveUser().getEmail();
sheet.getRange('E11').setValue(email);
}


// This function ensures that the values that can be altered by the user are URL compatible 
function encode(value) {
  return encodeURIComponent(value);
}

function onOpen() {

  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  SpreadsheetApp.setActiveSheet(spreadsheet.getSheets()[0]);
  var sheet = spreadsheet.getActiveSheet()

  // gets the current date to quickly set the campaign start. Make sure that the reference matches your sheet.
  var d = new Date();
  var timeStamp = d.getTime();  // Number of ms since Jan 1, 1970
  timeStamp = timeStamp/86400000 + 25569
  sheet.getRange('C6').setValue(timeStamp);
}

Installing Google Tag Manager in WordPress

For the basic Google Tag Manager setup you’ll just need to place the „container-snippet“ on every page of your website. A website is typically structured in a way that allows you to place the code in one file which results the code to be shown on every page of the website. In wordpress this file is the header.php.

There are a couple of ways how to do the implementation. The two pieces of code you’ll need to put on your website should be located right after the opening <head> tag and after the opening <body> tag. As described in the Lesson about WordPress Child-Themes you don’t want to edit your master theme but rather make the adjustment in your child theme. I’ve recorded a quick video of my recommended implementation.

Code you’ll need to place into the header.php of your WordPress Theme:

<?php do_action('after_head_open'); ?>

<?php do_action('after_body_open'); ?>

Code for the functions.php file:

add_action('after_head_open',  'insert_gtm_head');
function insert_gtm_head() {
?>
<!-- Insert Code Here -->
<?php
}

add_action('after_body_open',  'insert_gtm_body');
function insert_gtm_body() {
?>
<!-- Insert Code Here -->
<?php
}

I do like to do those things myself, this is part of the whole idea of being a technical marketer. You could very well just use a wordpress plugin – but – be aware of big overbloated plugin, they might have some tracking code in them … they get code-access to your website so you should just be careful. For the Google Tag Manager implementation I can recommend Google Tag Manager. It seems very lightweight and doesn’t contain any unnecessary code.

Master Google Sheets

Google Sheets is the cloud-based alternative to Microsoft Excel. Although Excel might still be the choice for some business needs, I’d strongly advise everybody to know your way around Google Spreadsheets. It’s fast, free and pretty easy to use.

We’re not going to talk about the basic stuff here (you should know the basic functions in spreadsheets) but two advanced functions that are very useful and will probably move you well above the crowd of people that say they know excel.

1) Index Match

Most people will use vlookup much too often. Really try to master INDEX(MATCH()) instead. It’s way more flexible. Just a bit harder to remember.

I always just remember one thing. You start with =INDEX( and the first thing to enter is the cell reference to the column that holds the desired results – once you’ve put that in say like this =INDEX(C:C just open the match formula and start of with the “search phrase” like so =INDEX(C:C;MATCH(A1, then refer to the column that you want to search in e.g. INDEX(C:C;MATCH(A1;F:F. Super important – always end the Match Formula with a 0 so that your finished function looks something like INDEX(C:C;MATCH(A1;F:F;0))

I’ve prepared a google sheet to show you a working example also visualising one of the advantages of Index-Match: the order of columns is not important – with VLOOKUP you need to worry about that stuff.

Just try to always use INDEX(MATCH()) instead of VLOOKUP() – you’ll understand the advantages soon enough.

2) Query Function

This one is a bit more complex but well worth your time. The Query-Function uses the Google Query Language to make data transformations quick and easy. The Google Query Language resembles MySQL a lot and just as MySQL it allows you to quickly drill down into large Datasets / Tables.

I’ve prepared another google sheet to show you a few examples. In the document you’ll see a simple dataset and a few options for a drilldown with the query function.

The Query Function looks like this:

=QUERY(A:Z;"select ...")

In this example A:Z would represent your dataset – just reference the whole dataset you want to grab data from.

The next parameter always starts with select and is enclosed by apostrophes. I’ll try to explain two different queries as an example here:

=QUERY(A:Z;"select B where A = '2016')

So, let’s say you have revenue in column B and the year in column A. With the query you’ll just get the values from column B where the column A is exacly 2016. Pretty easy right?

Off to something a bit more complex:

QUERY(A:Z;"select A,sum(B) group by A")

We’re looking at the same dataset, this time we want the sum of revenue grouped by the year. With select A,sum(B) we’re basically telling the function that we want A (the year) in the first column and sum(B) (the sum of revenue) in the second column. As there could be two rows with data for the same year we need to tell the function over which variable we want to calculate a sum thats what group by A is for.

We don’t want the result to look like this:

2011 | 2000
2011 | 1000
2012 | 5000

But instead what we want to get is this:

2011 | 3000
2012 | 5000

That’s why we need to group the result – in this case by A (the year)

Check out the documentation of the Google Query Language for a lot more examples and many more options. These examples really only show you a starting point of all the advantages.

Basic Web Scraping With Google Sheets

This article serves two purposes. 1) To show you that there are basically no limits to what can be done with Google Sheets. 2) To give you a glimpse into web scraping.

The key takeaway for you should be that there is almost always a way of automating a task, just make sure not to fall into this trap.

What we’re doing

Basically we’re building a way to extract structured data from seemingly unstructured data (a website).

Example

  • I extract all links from a given website.
  • I filter the links to only look at specific links (in the example case: product pages)
  • From each given filtered URL I grab a specific item on the page and extract it’s value to the sheet. (in the example the product price of the item)

Check out the example sheet

I’m utilising a few advanced functions that we will partly come back to later:

  • importxml() in conjunction with XPath Query Language – this is the secret sauce to the example. This function enables us to import contents of a remote website (or other files)
  • regexmatch() is one of three regex-related functions google sheets offers which I’ll explain in a future lesson.
  • filter() is a basic function and should definitely be in your personal tool-stack.

With these functions in place we could in theory build a product feed from a website that we don’t even own. And with a bit of google apps script we could utilise these functions to build a price tracker for a website, pretty neat, right?

Update: I built another example – a reddit rank tracker. You’ll have copy it and set up a time trigger in Tools -> Script Editor. Also set the spreadsheet recalculation settings to “On change and every hour” (File -> Spreadsheet settings -> Calculation)

Update 2: Looking for more advanced web scraping techniques. Check out my article on web scraping with Ruby and Nokogiri.

Getting Started with Google Tag Manager

Before we get into the details – let me explain a bit about the general terminology of the topic at hand.

When you operate a website you’ll at some point have to connect another web-service to your website. You’ll might have to pass some data to get web-analytics up and running or transmit purchase information to another service to be able to compensate for a referred customer. (Lookup Affiliate-Marketing)

This transmission of data is done through a few lines of code that you implement on your website. Generally these parts of coding are referred to as Tracking-Pixel, Tag, Tracking-Code …

Google Tag Manager

This is where the free Google Tag Manager enters the stage. The software allows you to manage all the code you want to inject to your page on a rule-to-fire-basis. Instead of managing all those little code pieces in several places of your website you’ll implement one so called „container-snipped“ on all your pages. Once the basic implementation is done you can manage all the little code pieces you’ll want to implement from one backend that is designed specifically for the task at hand.

The Basic Structure

Google Tag Manager consists of 4 main parts that you should know to differentiate.

1) Tags

The heart of GTM are Tags. A Tag is a representation of a piece of code (e.g. a tracking script) that you want to inject on your website.

2) Trigger

You don’t want to have every Tag to be injected to your site on every page or every instance. You want to be a bit more smart about it – that’s were Trigger help you. A Tag won’t be deployed without a Trigger telling it to do so. A basic Trigger could be a “All Pages Pageview” – that’s probably the most generic one that could be applied to the Google Analytics Pageview Tag.

There are also blocking triggers that can be specified additionally to the firing trigger – they provide a way to specify an exemption to the firing trigger for example if you want to formulate a rule like “Fire on every page but only if the pageview is not from me (internal)”. In this case you would add a blocking rule that is “true” if the traffic originates from your computer. (Tutorial)

3) Macros / Variables

Macros are Variables that you can use all around GTM to get dynamic data into your Tags. A good example would be a variable like transactionTotal specifying the total value of a transaction on an ecommerce shop’s checkout page.

4) DataLayer

The DataLayer is another part of the implementation (advanced) that makes it possible for your website to communicate with the Google Tag Manager. The just mentioned Macros can be specified and filled with dynamic data in the DataLayer – which is a small script on your website that needs to be placed just above the GTM Script.

You can quickly read up about the procedure in the Developer Guide.

Further Reading

For all things related to the Google Tag Manger check out the blog of Simo Ahava. His Tutorials are very thorough and detailed. I’ve started to google for things related to GTM with the search phase always starting with “simo ahava” followed by the search term I’m looking for an answer to.

WordPress Child-Themes

So you’ve just (bought and) installed a theme. After a while you will eventually run into a situation where you have to – or want to – change some code of the theme. A very common and basic change would be that you’ll want to activate Google Analytics (Free Web Analytics) on your site.

(more…)

WordPress Plugins

WordPress is very customizable. At the core of the customization is the plugin-functionality. A developer can code an extra feature for wordpress and connect it to the system via a so called „plugin“.

These plugins range from very simple to super complex. Here I’ll present to you my basic plugin setup that I recommend on every site and give you an idea of what else is out there.

(more…)

WordPress Setup & Your first theme

What I do first after installing wordpress:

  • Finding a suitable theme
  • Change the permalink structure
  • Comments? Yes/No

(more…)

Install WordPress

WordPress is the most popular Content Management System (CMS) that is the backbone for a huge part of the internet. The system is free and highly flexible.

WordPress can be installed on your own platform (self-hosted, free) or be operated by wordpress.com (hosted, not free). A lot more common is the self-hosted variation but both are valid options.

Fun Fact: At the time of writing 26% of all websites are managed with WordPress.

(more…)

Connect to a server with FTP

FTP is a file transfer protocol thats used to get files from A to B. In a marketing sense a (secure) FTP-Server many times linkes two companies/services to transfer data.

(more…)

Register a domain

Probably I don’t have to explain why a domain might be useful … Fun fact: At the time of writing there are just about 1.135.214.443 (1.14 billion!) websites/domains registered.

(more…)

Never miss another guide, sign up now

Cookie Settings

© 2023 Technical Marketing Guide | Imprint